[关闭]
@ruoli 2016-09-09T14:55:35.000000Z 字数 6291 阅读 5279

BootstrapValidator使用方法

Web前端

BootstrapValidator是现在网上比较推荐的Bootstrap表单验证框架，提供了优秀的界面验证样式，丰富的示例，在实际使用中也是非常好用，完全满足基于bootstrap3.x的验证需求，但是也有缺点，BootstrapValidator没有标准的API文档仅提供实例，而且已经停止更新，原作者转而开发一个新的收费验证框架，具体可见：http://formvalidation.io/，所以在不考虑Bootstrip更新4.x的情况下， 使用BootstrapValidator还是不错的选择。

1、下载BootstrapValidator实例包

点击后面连接进行下载：点此下载
密码：ttqg
验证效果如下：
验证效果

2、以data-x方式配置验证

示例中绝大多数大部分内容，都是以JS配置的方式，对每个字段逐一配置验证，具体可参考示例文件，这里讲解使用输入控件的属性配置的方式配置验证规则，这样可以避免大量的js配置。

1、常用data-x属性配置

图一中验证实际代码如下：

  1. <form id="defaultForm" method="post" class="form-horizontal" action="target.php"
  2.       data-fv-message="This value is not valid"
  3.       data-fv-icon-valid="glyphicon glyphicon-ok"
  4.       data-fv-icon-invalid="glyphicon glyphicon-remove"
  5.       data-fv-icon-validating="glyphicon glyphicon-refresh">
  6.     <div class="form-group">
  7.         <label class="col-lg-3 control-label">Full name</label>
  8.         <div class="col-lg-4">
  9.             <input type="text" class="form-control" name="firstName" placeholder="First name" required data-fv-notempty-message="The first name is required and cannot be empty" />
  10.         </div>
  11.         <div class="col-lg-4">
  12.             <input type="text" class="form-control" name="lastName" placeholder="Last name" required data-fv-notempty-message="The last name is required and cannot be empty" />
  13.         </div>
  14.     </div>
  16.     <div class="form-group">
  17.         <label class="col-lg-3 control-label">Username</label>
  18.         <div class="col-lg-5">
  19.             <input type="text" class="form-control" name="username"
  20.                    data-fv-message="The username is not valid"
  21.                    required data-fv-notempty-message="The username is required and cannot be empty"
  22.                    pattern="^[a-zA-Z0-9]+$" data-fv-regexp-message="The username can only consist of alphabetical and digits"
  23.                    data-fv-stringlength="true" data-fv-stringlength-min="6" data-fv-stringlength-max="30" data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long"
  24.                    data-fv-remote="true" data-fv-remote-url="remote.php" data-fv-remote-message="The username is not available" />
  25.         </div>
  26.     </div>
  28.     <div class="form-group">
  29.         <label class="col-lg-3 control-label">Email address</label>
  30.         <div class="col-lg-5">
  31.             <input class="form-control" name="email" type="email" data-fv-emailaddress-message="The input is not a valid email address" />
  32.         </div>
  33.     </div>
  35.     <div class="form-group">
  36.         <label class="col-lg-3 control-label">Password</label>
  37.         <div class="col-lg-5">
  38.             <input type="password" class="form-control" name="password"
  39.                    required data-fv-notempty-message="The password is required and cannot be empty"
  40.                    data-fv-different="true" data-fv-different-field="username" data-fv-different-message="The password cannot be the same as username" />
  41.         </div>
  42.     </div>
  44.     <div class="form-group">
  45.         <label class="col-lg-3 control-label">Retype password</label>
  46.         <div class="col-lg-5">
  47.             <input type="password" class="form-control" name="confirmPassword"
  48.                    required data-fv-notempty-message="The confirm password is required and cannot be empty"
  49.                    data-fv-identical="true" data-fv-identical-field="password" data-fv-identical-message="The password and its confirm are not the same" />
  50.         </div>
  51.     </div>
  53.     <div class="form-group">
  54.         <label class="col-lg-3 control-label">Gender</label>
  55.         <div class="col-lg-5">
  56.             <div class="radio">
  57.                 <label>
  58.                     <input type="radio" name="gender" value="male" required data-fv-notempty-message="The gender is required" /> Male
  59.                 </label>
  60.             </div>
  61.             <div class="radio">
  62.                 <label>
  63.                     <input type="radio" name="gender" value="female" /> Female
  64.                 </label>
  65.             </div>
  66.             <div class="radio">
  67.                 <label>
  68.                     <input type="radio" name="gender" value="other" /> Other
  69.                 </label>
  70.             </div>
  71.         </div>
  72.     </div>
  74.     <div class="form-group">
  75.         <label class="col-lg-3 control-label">Birthday</label>
  76.         <div class="col-lg-5">
  77.             <input type="text" class="form-control" name="birthday" data-fv-date="true" data-fv-date-format="YYYY/MM/DD" data-fv-date-message="The birthday is not valid" /> (YYYY/MM/DD)
  78.         </div>
  79.     </div>
  81.     <div class="form-group">
  82.         <label class="col-lg-3 control-label">Country</label>
  83.         <div class="col-lg-5">
  84.             <select class="form-control" name="country" data-fv-notempty data-fv-notempty-message="The country is required">
  85.                 <option value="">-- Select a country --</option>
  86.                 <option value="fr">France</option>
  87.                 <option value="de">Germany</option>
  88.                 <option value="it">Italy</option>
  89.                 <option value="jp">Japan</option>
  90.                 <option value="ru">Russia</option>
  91.                 <option value="gb">United Kingdom</option>
  92.                 <option value="us">United State</option>
  93.             </select>
  94.         </div>
  95.     </div>
  97.     <div class="form-group">
  98.         <label class="col-lg-3 control-label">Languages</label>
  99.         <div class="col-lg-5">
  100.             <div class="checkbox">
  101.                 <label>
  102.                     <input type="checkbox" name="languages[]" value="english" data-fv-message="Please specify at least one language you can speak" /> English
  103.                 </label>
  104.             </div>
  105.             <div class="checkbox">
  106.                 <label>
  107.                     <input type="checkbox" name="languages[]" value="french" /> French
  108.                 </label>
  109.             </div>
  110.             <div class="checkbox">
  111.                 <label>
  112.                     <input type="checkbox" name="languages[]" value="german" required /> German
  113.                 </label>
  114.             </div>
  115.             <div class="checkbox">
  116.                 <label>
  117.                     <input type="checkbox" name="languages[]" value="russian" /> Russian
  118.                 </label>
  119.             </div>
  120.             <div class="checkbox">
  121.                 <label>
  122.                     <input type="checkbox" name="languages[]" value="other" /> Other
  123.                 </label>
  124.             </div>
  125.         </div>
  126.     </div>
  128.     <div class="form-group">
  129.         <label class="col-lg-3 control-label">Programming Languages</label>
  130.         <div class="col-lg-5">
  131.             <div class="checkbox">
  132.                 <label>
  133.                     <input type="checkbox" name="programs[]" value="net" data-fv-choice="true" data-fv-choice-min="2" data-fv-choice-max="4" data-fv-choice-message="Please choose 2 - 4 programming languages you are good at" /> .Net
  134.                 </label>
  135.             </div>
  136.             <div class="checkbox">
  137.                 <label>
  138.                     <input type="checkbox" name="programs[]" value="java" /> Java
  139.                 </label>
  140.             </div>
  141.             <div class="checkbox">
  142.                 <label>
  143.                     <input type="checkbox" name="programs[]" value="c" /> C/C++
  144.                 </label>
  145.             </div>
  146.             <div class="checkbox">
  147.                 <label>
  148.                     <input type="checkbox" name="programs[]" value="php" /> PHP
  149.                 </label>
  150.             </div>
  151.             <div class="checkbox">
  152.                 <label>
  153.                     <input type="checkbox" name="programs[]" value="perl" /> Perl
  154.                 </label>
  155.             </div>
  156.             <div class="checkbox">
  157.                 <label>
  158.                     <input type="checkbox" name="programs[]" value="ruby" /> Ruby
  159.                 </label>
  160.             </div>
  161.             <div class="checkbox">
  162.                 <label>
  163.                     <input type="checkbox" name="programs[]" value="python" /> Python
  164.                 </label>
  165.             </div>
  166.             <div class="checkbox">
  167.                 <label>
  168.                     <input type="checkbox" name="programs[]" value="javascript" /> Javascript
  169.                 </label>
  170.             </div>
  171.         </div>
  172.     </div>
  174.     <div class="form-group">
  175.         <div class="col-lg-9 col-lg-offset-3">
  176.             <button type="submit" class="btn btn-primary">提交</button>
  177.         </div>
  178.     </div>
  179. </form>

2、初始化方式

  1. $(document).ready(function() {
  2.    $('#defaultForm').formValidation();
  3. });

3、其他API常用操作

1、重新验证特定字段

  1. $('#defaultForm').formValidation('revalidateField',"inputName");

2、Js触发验证

  1. var validateResult=$('#defaultForm').data('formValidation').validate().isValid();
  2. if(validateResult){
  3.   //通过验证
  4. }

3、解绑所有验证

  1. $('#defaultForm').data('formValidation').destroy();
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注