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>  

留言

張貼留言