Bootstrap 表單驗證 BootstrapValidator

做網站難免就會遇到需要驗證表單的時候，因為要自己寫驗證很麻煩(也不用每次都花力氣)，所以就有很多人寫好驗證的 plugin 供人使用，這陣子以來 bootstrap 很流行，最近也找到了用 bootstrap 為基礎的Validator BootstrapValidator，用起來也很簡單，有興趣就試試吧。

當然也是先把東西放到網頁上。

view plaincopy to clipboardprint

1. <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/>  
2. <link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/>  
3.   
4. <script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script>  
5. <script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script>  

然後參考網站上的寫法。

view plaincopy to clipboardprint

1. $('.registerForm').bootstrapValidator({   
2.         message: 'This value is not valid',   
3.         feedbackIcons: {   
4.             valid: 'glyphicon glyphicon-ok',   
5.             invalid: 'glyphicon glyphicon-remove',   
6.             validating: 'glyphicon glyphicon-refresh'  
7.         },   
8.         fields: {   
9.             username: {   
10.                 message: 'The username is not valid',   
11.                 validators: {   
12.                     notEmpty: {   
13.                         message: 'The username is required and cannot be empty'  
14.                     },   
15.                     stringLength: {   
16.                         min: 6,   
17.                         max: 30,   
18.                         message: 'The username must be more than 6 and less than 30 characters long'  
19.                     },   
20.                     regexp: {   
21.                         regexp: /^[a-zA-Z0-9_]+$/,   
22.                         message: 'The username can only consist of alphabetical, number and underscore'  
23.                     }   
24.                 }   
25.             },   
26.             email: {   
27.                 validators: {   
28.                     notEmpty: {   
29.                         message: 'The email is required and cannot be empty'  
30.                     },   
31.                     emailAddress: {   
32.                         message: 'The input is not a valid email address'  
33.                     }   
34.                 }   
35.             }   
36.         }   
37.     });  

或是直接寫在 html 裡就可以執行了。

view plaincopy to clipboardprint

1. <div class="form-group">  
2.         <label class="col-lg-3 control-label">Full name</label>  
3.         <div class="col-lg-4">  
4.             <input type="text" class="form-control" name="firstName" placeholder="First name"  
5.                 data-bv-notempty="true"  
6.                 data-bv-notempty-message="The first name is required and cannot be empty" />  
7.         </div>  
8.         <div class="col-lg-4">  
9.             <input type="text" class="form-control" name="lastName" placeholder="Last name"  
10.                 data-bv-notempty="true"  
11.                 data-bv-notempty-message="The last name is required and cannot be empty" />  
12.         </div>  
13. </div>