bootstrapValidator表单验证使用方法

àì夳堔傛蜴生んèń 2022-05-17 04:28 287阅读 0赞

在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件

然后建立一个form表单，添加表单控件，表单控件必须有绝对定位，不然会报错

1.  `<form action="" method="POST" role="form" id="form-test">`
2.  `<legend>Form title</legend>`
3.   
4.  `<div class="form-group">`
5.  `<label for="">label</label>`
6.  `<input type="text" class="form-control" id="" name="text" placeholder="Input field">`
7.  `</div>`
8.   
9.   
10.  
11. `<button id="btn-test" class="btn btn-primary">Submit</button>`
12. `</form>`

编写js文件

1.  `$(function () {`
2.  `$("#form-test").bootstrapValidator({`
3.  `live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证`
4.  `excluded: [':disabled', ':hidden', ':not(:visible)'],//排除无需验证的控件，比如被禁用的或者被隐藏的`
5.  `submitButtons: '#btn-test',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反而加了这句话非submit按钮也会提交到action指定页面`
6.  `message: '通用的验证失败消息',//好像从来没出现过`
7.  `feedbackIcons: {//根据验证结果显示的各种图标`
8.  `valid: 'glyphicon glyphicon-ok',`
9.  `invalid: 'glyphicon glyphicon-remove',`
10. `validating: 'glyphicon glyphicon-refresh'`
11. `},`
12. `fields: {`
13. `text: {`
14. `validators: {`
15. `notEmpty: {//检测非空,radio也可用`
16. `message: '文本框必须输入'`
17. `},`
18. `stringLength: {//检测长度`
19. `min: 6,`
20. `max: 30,`
21. `message: '长度必须在6-30之间'`
22. `},`
23. `regexp: {//正则验证`
24. `regexp: /^[a-zA-Z0-9_\.]+$/,`
25. `message: '所输入的字符不符要求'`
26. `},`
27. `remote: {//将内容发送至指定页面验证，返回验证结果，比如查询用户名是否存在`
28. `url: '指定页面',`
29. `message: 'The username is not available'`
30. `},`
31. `different: {//与指定文本框比较内容相同`
32. `field: '指定文本框name',`
33. `message: '不能与指定文本框内容相同'`
34. `},`
35. `emailAddress: {//验证email地址`
36. `message: '不是正确的email地址'`
37. `},`
38. `identical: {//与指定控件内容比较是否相同，比如两次密码不一致`
39. `field: 'confirmPassword',//指定控件name`
40. `message: '输入的内容不一致'`
41. `},`
42. `date: {//验证指定的日期格式`
43. `format: 'YYYY/MM/DD',`
44. `message: '日期格式不正确'`
45. `},`
46. `choice: {//check控件选择的数量`
47. `min: 2,`
48. `max: 4,`
49. `message: '必须选择2-4个选项'`
50. `}`
51. `}`
52. `}`
53. `}`
54. `});`
55. `$("#btn-test").click(function () {//非submit按钮点击后进行验证，如果是submit则无需此句直接验证`
56. `$("#form-test").bootstrapValidator('validate');//提交验证`
57. `if ($("#form-test").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执行下面代码`
58. `alert("yes");//验证成功后的操作，如ajax`
59. `}`
60. `});`
61. `});`

转载于：[https://blog.csdn.net/jewely/article/details/77810472][https_blog.csdn.net_jewely_article_details_77810472]

[https_blog.csdn.net_jewely_article_details_77810472]: https://blog.csdn.net/jewely/article/details/77810472