基于Bootstrap+jQuery.validate Form表单验证实践

项目结构 ：
 
 
github 上源码地址：https://github.com/starzou/front-end-example    点击打开
 

1、form 表单代码

[html] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>Bootstrap Form Template</title>  
  5.         <meta charset="utf-8" />  
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  7.         <link rel="stylesheet" type="text/css" href="plugins/bootstrap/css/bootstrap.css"/>  
  8.     </head>  
  9.     <body>  
  10.         <div class="container">  
  11.             <h1 class="text-center text-danger">Form 示例</h1>  
  12.             <form role="form" class="form-horizontal" action="javascript:alert('验证成功,可以提交.');" method="post">  
  13.                 <div class="form-group">  
  14.                     <label class="col-md-2 control-label" for="name">Name</label>  
  15.                     <div class="col-md-10">  
  16.                         <input class="form-control" name="name" type="text" id="name" placeholder="Name" value="" />  
  17.                     </div>  
  18.                 </div>  
  19.                 <div class="form-group">  
  20.                     <label class="col-md-2 control-label" for="exampleInputPassword1">Password</label>  
  21.                     <div class="col-md-10">  
  22.                         <input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">  
  23.                     </div>  
  24.                 </div>  
  25.                 <div class="form-group">  
  26.                     <label for="intro" class="control-label col-md-2">Intro</label>  
  27.                     <div class="col-md-10">  
  28.                         <textarea id="intro" class="form-control" rows="3" name="intro" placeholder="Intro"></textarea>  
  29.                     </div>  
  30.                 </div>  
  31.   
  32.                 <div class="form-group">  
  33.                     <label class="control-label col-md-2">Gender</label>  
  34.                     <div class="col-md-10">  
  35.                         <label class="radio-inline">  
  36.                             <input type="radio" name="gender"  value="男" />  
  37.                             boy </label>  
  38.   
  39.                         <label class="radio-inline">  
  40.                             <input type="radio" name="gender"  value="女" />  
  41.                             gril </label>  
  42.                     </div>  
  43.                 </div>  
  44.   
  45.                 <div class="form-group">  
  46.                     <label for="hobby" class="control-label col-md-2">Hobby</label>  
  47.                     <div class="col-md-10">  
  48.                         <div class="checkbox">  
  49.                             <label>  
  50.                                 <input type="checkbox" name="hobby" value="Music">  
  51.                                 Music</label>  
  52.                         </div>  
  53.                         <div class="checkbox">  
  54.                             <label>  
  55.                                 <input type="checkbox" name="hobby" id="" value="Game" />  
  56.                                 Game </label>  
  57.                         </div>  
  58.   
  59.                         <label class="checkbox-inline">  
  60.                             <input type="checkbox" id="inlineCheckbox1" value="option1">  
  61.                             option1 </label>  
  62.                         <label class="checkbox-inline">  
  63.                             <input type="checkbox" id="inlineCheckbox2" value="option2">  
  64.                             option3</label>  
  65.                         <label class="checkbox-inline">  
  66.                             <input type="checkbox" id="inlineCheckbox3" value="option3">  
  67.                             option3 </label>  
  68.                     </div>  
  69.                 </div>  
  70.   
  71.                 <div class="form-group">  
  72.                     <label for="sel" class="control-label col-md-2">Select</label>  
  73.                     <div class="col-md-10">  
  74.                         <select multiple="" id="sel" name="sel" class="form-control">  
  75.                             <option value="1">1</option>  
  76.                             <option value="2">2</option>  
  77.                             <option value="3">3</option>  
  78.                         </select>  
  79.                     </div>  
  80.                 </div>  
  81.   
  82.                 <div class="form-group">  
  83.                     <div class="col-md-offset-2 col-md-10">  
  84.                         <button type="submit" class="btn btn-primary btn-sm">  
  85.                             Submit  
  86.                         </button>  
  87.                         <button type="reset" class="btn btn-primary btn-sm">  
  88.                             Reset  
  89.                         </button>  
  90.                     </div>  
  91.                 </div>  
  92.             </form>  
  93.         </div>  
  94.   
  95.         <script src="plugins/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>  
  96.         <script src="plugins/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>  
  97.         <script src="plugins/jquery-validation/dist/jquery.validate.js" type="text/javascript" charset="utf-8"></script>  
  98.   
  99.         <script src="scripts/form.js" type="text/javascript" charset="utf-8"></script>  
  100.         <script type="text/javascript" charset="utf-8">  
  101.             MyValidator.init();  
  102.         </script>  
  103.     </body>  
  104. </html>  

需要引用 jquery.js，bootstrap.js，jquery.validate.js 库
 

2、form.js 代码

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. var MyValidator = function() {  
  2.     var handleSubmit = function() {  
  3.         $('.form-horizontal').validate({  
  4.             errorElement : 'span',  
  5.             errorClass : 'help-block',  
  6.             focusInvalid : false,  
  7.             rules : {  
  8.                 name : {  
  9.                     required : true  
  10.                 },  
  11.                 password : {  
  12.                     required : true  
  13.                 },  
  14.                 intro : {  
  15.                     required : true  
  16.                 }  
  17.             },  
  18.             messages : {  
  19.                 name : {  
  20.                     required : "Username is required."  
  21.                 },  
  22.                 password : {  
  23.                     required : "Password is required."  
  24.                 },  
  25.                 intro : {  
  26.                     required : "Intro is required."  
  27.                 }  
  28.             },  
  29.   
  30.             highlight : function(element) {  
  31.                 $(element).closest('.form-group').addClass('has-error');  
  32.             },  
  33.   
  34.             success : function(label) {  
  35.                 label.closest('.form-group').removeClass('has-error');  
  36.                 label.remove();  
  37.             },  
  38.   
  39.             errorPlacement : function(error, element) {  
  40.                 element.parent('div').append(error);  
  41.             },  
  42.   
  43.             submitHandler : function(form) {  
  44.                 form.submit();  
  45.             }  
  46.         });  
  47.   
  48.         $('.form-horizontal input').keypress(function(e) {  
  49.             if (e.which == 13) {  
  50.                 if ($('.form-horizontal').validate().form()) {  
  51.                     $('.form-horizontal').submit();  
  52.                 }  
  53.                 return false;  
  54.             }  
  55.         });  
  56.     }  
  57.     return {  
  58.         init : function() {  
  59.             handleSubmit();  
  60.         }  
  61.     };  
  62.   
  63. }();  
 
效果 ：
posted @ 2014-11-13 10:46  技术狂  阅读(712)  评论(0)  编辑  收藏  举报