jquery配合Bootstrap中的表单验证插件bootstrapValidator使用方法

Myth丶恋晨 2023-08-17 16:57 117阅读 0赞

使用bootstrap遇到表单校验，最常用的一款表单校验插件

github地址：https://github.com/nghuuphuoc/bootstrapvalidator

使用：

将文件下载 或者用 git clone下来

1299566-20190728111906305-1626063725.png

1.引入css到head中，引入js到body结束标签的前面即可

提示：1299566-20190728112122423-931483397.png

默认是英语的，需要变成中文：

将github中dist中的\js\language\zh_CN.js 引入文件中即可

官方完整实例版:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>BootstrapValidator demo</title>
  5. <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>
  6. <link rel="stylesheet" href="dist/css/bootstrapValidator.css"/>
  7. <!-- Include the FontAwesome CSS if you want to use feedback icons provided by FontAwesome -->
  8. <!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/../css/font-awesome.css" />-->
  9. <script type="text/javascript" src="vendor/jquery/jquery-...min.js"></script>
  10. <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>
  11. <script type="text/javascript" src="dist/js/bootstrapValidator.js"></script>
  12. </head>
  13. <body>
  14. <div class="container">
  15. <div class="row">
  16. <!-- form: -->
  17. <section>
  18. <div class="col-lg- col-lg-offset-">
  19. <div class="page-header">
  20. <h>Sign up</h>
  21. </div>
  22. <form id="defaultForm" method="post" class="form-horizontal" action="target.php">
  23. <div class="form-group">
  24. <label class="col-lg- control-label">Full name</label>
  25. <div class="col-lg-">
  26. <input type="text" class="form-control" name="firstName" placeholder="First name" />
  27. </div>
  28. <div class="col-lg-">
  29. <input type="text" class="form-control" name="lastName" placeholder="Last name" />
  30. </div>
  31. </div>
  32. <div class="form-group">
  33. <label class="col-lg- control-label">Username</label>
  34. <div class="col-lg-">
  35. <input type="text" class="form-control" name="username" />
  36. </div>
  37. </div>
  38. <div class="form-group">
  39. <label class="col-lg- control-label">Email address</label>
  40. <div class="col-lg-">
  41. <input type="text" class="form-control" name="email" />
  42. </div>
  43. </div>
  44. <div class="form-group">
  45. <label class="col-lg- control-label">Password</label>
  46. <div class="col-lg-">
  47. <input type="password" class="form-control" name="password" />
  48. </div>
  49. </div>
  50. <div class="form-group">
  51. <label class="col-lg- control-label">Retype password</label>
  52. <div class="col-lg-">
  53. <input type="password" class="form-control" name="confirmPassword" />
  54. </div>
  55. </div>
  56. <div class="form-group">
  57. <label class="col-lg- control-label">Gender</label>
  58. <div class="col-lg-">
  59. <div class="radio">
  60. <label>
  61. <input type="radio" name="gender" value="male" /> Male
  62. </label>
  63. </div>
  64. <div class="radio">
  65. <label>
  66. <input type="radio" name="gender" value="female" /> Female
  67. </label>
  68. </div>
  69. <div class="radio">
  70. <label>
  71. <input type="radio" name="gender" value="other" /> Other
  72. </label>
  73. </div>
  74. </div>
  75. </div>
  76. <div class="form-group">
  77. <label class="col-lg- control-label">Birthday</label>
  78. <div class="col-lg-">
  79. <input type="text" class="form-control" name="birthday" /> (YYYY/MM/DD)
  80. </div>
  81. </div>
  82. <div class="form-group">
  83. <label class="col-lg- control-label">Languages</label>
  84. <div class="col-lg-">
  85. <div class="checkbox">
  86. <label>
  87. <input type="checkbox" name="languages[]" value="english" /> English
  88. </label>
  89. </div>
  90. <div class="checkbox">
  91. <label>
  92. <input type="checkbox" name="languages[]" value="french" /> French
  93. </label>
  94. </div>
  95. <div class="checkbox">
  96. <label>
  97. <input type="checkbox" name="languages[]" value="german" /> German
  98. </label>
  99. </div>
  100. <div class="checkbox">
  101. <label>
  102. <input type="checkbox" name="languages[]" value="russian" /> Russian
  103. </label>
  104. </div>
  105. <div class="checkbox">
  106. <label>
  107. <input type="checkbox" name="languages[]" value="other" /> Other
  108. </label>
  109. </div>
  110. </div>
  111. </div>
  112. <div class="form-group">
  113. <label class="col-lg- control-label">Programming Languages</label>
  114. <div class="col-lg-">
  115. <div class="checkbox">
  116. <label>
  117. <input type="checkbox" name="programs[]" value="net" /> .Net
  118. </label>
  119. </div>
  120. <div class="checkbox">
  121. <label>
  122. <input type="checkbox" name="programs[]" value="java" /> Java
  123. </label>
  124. </div>
  125. <div class="checkbox">
  126. <label>
  127. <input type="checkbox" name="programs[]" value="c" /> C/C++
  128. </label>
  129. </div>
  130. <div class="checkbox">
  131. <label>
  132. <input type="checkbox" name="programs[]" value="php" /> PHP
  133. </label>
  134. </div>
  135. <div class="checkbox">
  136. <label>
  137. <input type="checkbox" name="programs[]" value="perl" /> Perl
  138. </label>
  139. </div>
  140. <div class="checkbox">
  141. <label>
  142. <input type="checkbox" name="programs[]" value="ruby" /> Ruby
  143. </label>
  144. </div>
  145. <div class="checkbox">
  146. <label>
  147. <input type="checkbox" name="programs[]" value="python" /> Python
  148. </label>
  149. </div>
  150. <div class="checkbox">
  151. <label>
  152. <input type="checkbox" name="programs[]" value="javascript" /> Javascript
  153. </label>
  154. </div>
  155. </div>
  156. </div>
  157. <div class="form-group">
  158. <label class="col-lg-3 control-label" id="captchaOperation"></label>
  159. <div class="col-lg-2">
  160. <input type="text" class="form-control" name="captcha" />
  161. </div>
  162. </div>
  163. <div class="form-group">
  164. <div class="col-lg-9 col-lg-offset-3">
  165. <button type="submit" class="btn btn-primary" name="signup" value="Sign up">Sign up</button>
  166. <button type="submit" class="btn btn-primary" name="signup2" value="Sign up 2">Sign up 2</button>
  167. <button type="button" class="btn btn-info" id="validateBtn">Manual validate</button>
  168. <button type="button" class="btn btn-info" id="resetBtn">Reset form</button>
  169. </div>
  170. </div>
  171. </form>
  172. </div>
  173. </section>
  174. <!-- :form -->
  175. </div>
  176. </div>
  177. <script type="text/javascript">
  178. $(document).ready(function() {
  179. // Generate a simple captcha
  180. function randomNumber(min, max) {
  181. return Math.floor(Math.random() * (max - min + 1) + min);
  182. };
  183. $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
  184. $('#defaultForm').bootstrapValidator({
  185. // live: 'disabled',
  186. message: 'This value is not valid',
  187. feedbackIcons: {
  188. valid: 'glyphicon glyphicon-ok',
  189. invalid: 'glyphicon glyphicon-remove',
  190. validating: 'glyphicon glyphicon-refresh'
  191. },
  192. fields: {
  193. firstName: {
  194. validators: {
  195. notEmpty: {
  196. message: 'The first name is required and cannot be empty'
  197. }
  198. }
  199. },
  200. lastName: {
  201. validators: {
  202. notEmpty: {
  203. message: 'The last name is required and cannot be empty'
  204. }
  205. }
  206. },
  207. username: {
  208. message: 'The username is not valid',
  209. validators: {
  210. notEmpty: {
  211. message: 'The username is required and cannot be empty'
  212. },
  213. stringLength: {
  214. min: 6,
  215. max: 30,
  216. message: 'The username must be more than 6 and less than 30 characters long'
  217. },
  218. regexp: {
  219. regexp: /^[a-zA-Z0-9_\.]+$/,
  220. message: 'The username can only consist of alphabetical, number, dot and underscore'
  221. },
  222. remote: {
  223. url: 'remote.php',
  224. message: 'The username is not available'
  225. },
  226. different: {
  227. field: 'password',
  228. message: 'The username and password cannot be the same as each other'
  229. }
  230. }
  231. },
  232. email: {
  233. validators: {
  234. emailAddress: {
  235. message: 'The input is not a valid email address'
  236. }
  237. }
  238. },
  239. password: {
  240. validators: {
  241. notEmpty: {
  242. message: 'The password is required and cannot be empty'
  243. },
  244. identical: {
  245. field: 'confirmPassword',
  246. message: 'The password and its confirm are not the same'
  247. },
  248. different: {
  249. field: 'username',
  250. message: 'The password cannot be the same as username'
  251. }
  252. }
  253. },
  254. confirmPassword: {
  255. validators: {
  256. notEmpty: {
  257. message: 'The confirm password is required and cannot be empty'
  258. },
  259. identical: {
  260. field: 'password',
  261. message: 'The password and its confirm are not the same'
  262. },
  263. different: {
  264. field: 'username',
  265. message: 'The password cannot be the same as username'
  266. }
  267. }
  268. },
  269. birthday: {
  270. validators: {
  271. date: {
  272. format: 'YYYY/MM/DD',
  273. message: 'The birthday is not valid'
  274. }
  275. }
  276. },
  277. gender: {
  278. validators: {
  279. notEmpty: {
  280. message: 'The gender is required'
  281. }
  282. }
  283. },
  284. 'languages[]': {
  285. validators: {
  286. notEmpty: {
  287. message: 'Please specify at least one language you can speak'
  288. }
  289. }
  290. },
  291. 'programs[]': {
  292. validators: {
  293. choice: {
  294. min: 2,
  295. max: 4,
  296. message: 'Please choose 2 - 4 programming languages you are good at'
  297. }
  298. }
  299. },
  300. captcha: {
  301. validators: {
  302. callback: {
  303. message: 'Wrong answer',
  304. callback: function(value, validator) {
  305. var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[]) + parseInt(items[]);
  306. return value == sum;
  307. }
  308. }
  309. }
  310. }
  311. }
  312. });
  313. // Validate the form manually
  314. $('#validateBtn').click(function() {
  315. $('#defaultForm').bootstrapValidator('validate');
  316. });
  317. $('#resetBtn').click(function() {
  318. $('#defaultForm').data('bootstrapValidator').resetForm(true);
  319. });
  320. });
  321. </script>
  322. </body>
  323. </html>

触发校验用：

  1. $('表单元素form').bootstrapValidator('validate');

常见问题：

1.插件自带的一个功能，点击校验按钮，校验失败按钮被禁止，校验成功才解开禁止

2.提交按钮不在form表单中，通过事件绑定进行ajax数据提交，当表单验证失败时不执行所绑定的后续事件，怎么解决？

解决方案如下：

  1. $("表单").submit(function(ev){ev.preventDefault();});
  3. $("表单外的按钮元素").on("click", function(){
  5. // 触发校验获取校验结果
  6. var bootstrapValidator = $("表单").data('bootstrapValidator');
  7. bootstrapValidator.validate();
  9. // 判断是否校验成功
  10. if(bootstrapValidator.isValid())
  11. // 校验成功调用submit触发表单提交
  12. $("你的表单元素").submit();
  13. //如果校验不成功就直接返回，不触发按钮
  14. else return;
  16. });

转载于:https://www.cnblogs.com/xiaolantian/p/11258313.html

发表评论

表情：
评论列表 （有 0 条评论，117人围观）

还没有评论，来说两句吧...

相关阅读