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

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>
  15. <div class="form-group">
  16. <label class="col-lg-3 control-label">Username</label>
  17. <div class="col-lg-5">
  18. <input type="text" class="form-control" name="username"
  19. data-fv-message="The username is not valid"
  20. required data-fv-notempty-message="The username is required and cannot be empty"
  21. pattern="^[a-zA-Z0-9]+$" data-fv-regexp-message="The username can only consist of alphabetical and digits"
  22. 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"
  23. data-fv-remote="true" data-fv-remote-url="remote.php" data-fv-remote-message="The username is not available" />
  24. </div>
  25. </div>
  26. <div class="form-group">
  27. <label class="col-lg-3 control-label">Email address</label>
  28. <div class="col-lg-5">
  29. <input class="form-control" name="email" type="email" data-fv-emailaddress-message="The input is not a valid email address" />
  30. </div>
  31. </div>
  32. <div class="form-group">
  33. <label class="col-lg-3 control-label">Password</label>
  34. <div class="col-lg-5">
  35. <input type="password" class="form-control" name="password"
  36. required data-fv-notempty-message="The password is required and cannot be empty"
  37. data-fv-different="true" data-fv-different-field="username" data-fv-different-message="The password cannot be the same as username" />
  38. </div>
  39. </div>
  40. <div class="form-group">
  41. <label class="col-lg-3 control-label">Retype password</label>
  42. <div class="col-lg-5">
  43. <input type="password" class="form-control" name="confirmPassword"
  44. required data-fv-notempty-message="The confirm password is required and cannot be empty"
  45. data-fv-identical="true" data-fv-identical-field="password" data-fv-identical-message="The password and its confirm are not the same" />
  46. </div>
  47. </div>
  48. <div class="form-group">
  49. <label class="col-lg-3 control-label">Gender</label>
  50. <div class="col-lg-5">
  51. <div class="radio">
  52. <label>
  53. <input type="radio" name="gender" value="male" required data-fv-notempty-message="The gender is required" /> Male
  54. </label>
  55. </div>
  56. <div class="radio">
  57. <label>
  58. <input type="radio" name="gender" value="female" /> Female
  59. </label>
  60. </div>
  61. <div class="radio">
  62. <label>
  63. <input type="radio" name="gender" value="other" /> Other
  64. </label>
  65. </div>
  66. </div>
  67. </div>
  68. <div class="form-group">
  69. <label class="col-lg-3 control-label">Birthday</label>
  70. <div class="col-lg-5">
  71. <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)
  72. </div>
  73. </div>
  74. <div class="form-group">
  75. <label class="col-lg-3 control-label">Country</label>
  76. <div class="col-lg-5">
  77. <select class="form-control" name="country" data-fv-notempty data-fv-notempty-message="The country is required">
  78. <option value="">-- Select a country --</option>
  79. <option value="fr">France</option>
  80. <option value="de">Germany</option>
  81. <option value="it">Italy</option>
  82. <option value="jp">Japan</option>
  83. <option value="ru">Russia</option>
  84. <option value="gb">United Kingdom</option>
  85. <option value="us">United State</option>
  86. </select>
  87. </div>
  88. </div>
  89. <div class="form-group">
  90. <label class="col-lg-3 control-label">Languages</label>
  91. <div class="col-lg-5">
  92. <div class="checkbox">
  93. <label>
  94. <input type="checkbox" name="languages[]" value="english" data-fv-message="Please specify at least one language you can speak" /> English
  95. </label>
  96. </div>
  97. <div class="checkbox">
  98. <label>
  99. <input type="checkbox" name="languages[]" value="french" /> French
  100. </label>
  101. </div>
  102. <div class="checkbox">
  103. <label>
  104. <input type="checkbox" name="languages[]" value="german" required /> German
  105. </label>
  106. </div>
  107. <div class="checkbox">
  108. <label>
  109. <input type="checkbox" name="languages[]" value="russian" /> Russian
  110. </label>
  111. </div>
  112. <div class="checkbox">
  113. <label>
  114. <input type="checkbox" name="languages[]" value="other" /> Other
  115. </label>
  116. </div>
  117. </div>
  118. </div>
  119. <div class="form-group">
  120. <label class="col-lg-3 control-label">Programming Languages</label>
  121. <div class="col-lg-5">
  122. <div class="checkbox">
  123. <label>
  124. <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
  125. </label>
  126. </div>
  127. <div class="checkbox">
  128. <label>
  129. <input type="checkbox" name="programs[]" value="java" /> Java
  130. </label>
  131. </div>
  132. <div class="checkbox">
  133. <label>
  134. <input type="checkbox" name="programs[]" value="c" /> C/C++
  135. </label>
  136. </div>
  137. <div class="checkbox">
  138. <label>
  139. <input type="checkbox" name="programs[]" value="php" /> PHP
  140. </label>
  141. </div>
  142. <div class="checkbox">
  143. <label>
  144. <input type="checkbox" name="programs[]" value="perl" /> Perl
  145. </label>
  146. </div>
  147. <div class="checkbox">
  148. <label>
  149. <input type="checkbox" name="programs[]" value="ruby" /> Ruby
  150. </label>
  151. </div>
  152. <div class="checkbox">
  153. <label>
  154. <input type="checkbox" name="programs[]" value="python" /> Python
  155. </label>
  156. </div>
  157. <div class="checkbox">
  158. <label>
  159. <input type="checkbox" name="programs[]" value="javascript" /> Javascript
  160. </label>
  161. </div>
  162. </div>
  163. </div>
  164. <div class="form-group">
  165. <div class="col-lg-9 col-lg-offset-3">
  166. <button type="submit" class="btn btn-primary">提交</button>
  167. </div>
  168. </div>
  169. </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();
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注