bootstrapValidator不触发校验

不念不忘少年蓝@ 2022-06-17 00:06 480阅读 0赞

## 一、前言 ##

BootstrapValidator是基于bootstrap3的jquery表单验证插件，是最适合bootstrap框架的表单验证插件，在工作中用到此框架就写下自己在使用中积累的一些心得

## 二、问题描述 ##

当按钮的类型为submit时，使用bootstrapValidator的isValid()能够使验证表单正常工作，但当button的type类型为button时，只调用bootstrapValidator的isValid()方法无法正常工作。这时候就需要使用bootstrapValidator的validate()方法进行激活。

## 三、项目代码 ##

1、JSP中

**\[html\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  **<****span** style="font-size:14px;"**>****<****div** id="addAdminDialog" class="modal fade" tabindex="-1"**>**  
2.      **<****div** class="modal-dialog cy-modal-dialog-f"**>**  
3.          **<****div** class="modal-content"**>**  
4.              **<****div** class="modal-header"**>**  
5.                  **<****button** class="close" data-dismiss="modal"**>****<****span****>**×**</****span****>****</****button****>**  
6.                  **<****h4** class="modal-title" id="myLargeModalLabel"**>**新增管理员**</****h4****>**  
7.              **</****div****>**  
8.              **<****div** class="modal-body"**>**  
9.                  **<****form** id="addAdminForm" method="post" action="$\{ctx\}/admin/operator/add.htm" class="form-horizontal"**>**  
10.                     **<****div** class="form-group"**>**  
11.                         **<****label** class="form-label text-bold" for=""**>**登录名**</****label****>**  
12.                         **<****input** class="form-control" placeholder="" type="text" name="loginName" id="addLoginName"**/>**  
13.                     **</****div****>**  
14.                     **<****div** class="form-group"**>**  
15.                         **<****label** class="form-label text-bold" for=""**>**用户名**</****label****>**  
16.                         **<****input** class="form-control" placeholder="" type="text" name="userName" id="addUserName" **/>**  
17.                     **</****div****>**  
18.                     **<****div** class="form-group"**>**  
19.                         **<****label** class="form-label text-bold" for=""**>**密码**</****label****>**  
20.                         **<****input** class="form-control" placeholder="" type="password" name="password" id="addPassword" **/>**  
21.                     **</****div****>**  
22.                     **<****div** class="form-group"**>**  
23.                         **<****label** class="form-label text-bold" for=""**>**角色**</****label****>**  
24.                         **<****div** class="form-group"**>**  
25.                             **<****div** class="col-md-10 col-xs-10"**>**  
26.                                 **<****div** class="checkbox cy-nopadding" id="addRoles"**>**  
27.                                     **<****c:forEach** var="role" items="$\{roles\}"**>**  
28.                                         **<****label** name="addRoleLabel" class="form-checkbox form-icon form-text"**>****<****input** type="checkbox" id="addRole\_$\{role.id\}" name="roles" value="$\{role.id\}"**>** $\{role.roleName\}**</****label****>**  
29.                                     **</****c:forEach****>**  
30.                                 **</****div****>**  
31.                             **</****div****>**  
32.                         **</****div****>**  
33.                     **</****div****>**  
34.                 **</****form****>**  
35.             **</****div****>**  
36.               
37.             **<****div** class="modal-footer"**>**  
38.                 **<****button** class="btn btn-primary" onclick="addAdmin();"**>**确定**</****button****>**  
39.                 **<****button** data-dismiss="modal" class="btn btn-default" type="button"**>**取消**</****button****>**  
40.             **</****div****>**  
41.         **</****div****>**  
42.     **</****div****>**  
43. **</****div****>****</****span****>**  
44.

### 2、JS ###

**\[javascript\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <span style="font-size:14px;">**var** faIcon = \{  
2.              valid: 'glyphicon glyphicon-ok',  
3.                  invalid: 'glyphicon glyphicon-remove',  
4.                  validating: 'glyphicon glyphicon-refresh'  
5.          \}  
6.          //新增管理员前台校验  
7.          $("\#addAdminForm").bootstrapValidator(\{  
8.              message: 'This value is not valid',  
9.              //反馈图标  
10.             feedbackIcons:faIcon,  
11.             fields: \{  
12.                 loginName:\{  
13.                     message:'登录名无效',  
14.                     validators:\{  
15.                         notEmpty:\{  
16.                             message:'登录名不能为空'  
17.                         \},  
18.                         StringLength:\{  
19.                             min:5,  
20.                             max:30,  
21.                             message:'用户名长度大于6位并且小于30位'  
22.                         \},  
23.                         regexp:\{  
24.                             regexp:/^\[a-zA-Z0-9\_\]+$/,  
25.                             message:'用户名只能由字母、数字和下划线'  
26.                         \}  
27.                     \}  
28.                 \},  
29.                 userName: \{  
30.                     message: '用户名格式不正确',  
31.                     validators: \{  
32.                         notEmpty: \{  
33.                         message: '用户名不能为空'  
34.                         \},  
35.                         stringLength: \{  
36.                             min: 6,  
37.                             max: 30,  
38.                             message: '用户名长度大于6位并且小于30位'  
39.                         \},  
40.                         regexp: \{  
41.                             regexp: /^\[a-zA-Z0-9\_\]+$/,  
42.                             message: '用户名只能由字母、数字和下划线'  
43.                         \}  
44.                     \}  
45.                 \},  
46.                 password: \{  
47.                     validators: \{  
48.                         notEmpty: \{  
49.                         message: '邮箱不能为空'  
50.                         \},  
51.                         emailAddress: \{  
52.                         message: '输入的不是一个有效的电子邮件地址'  
53.                         \}  
54.                     \}  
55.                 \}  
56.             \}  
57.         \});</span>

**\[javascript\]**  [view plain][]   [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <span style="font-size:14px;">// 新增操作员  
2.          **function** addAdmin() \{  
3.              /\*手动验证表单，当是普通按钮时。\*/  
4.              $('\#addAdminForm').data('bootstrapValidator').validate();  
5.              **if**(!$('\#addAdminForm').data('bootstrapValidator').isValid())\{  
6.                  **return** ;  
7.              \}  
8.              $("\#addAdminForm").ajaxSubmit(\{  
9.                  dataType : 'json',  
10.                 type : "post",  
11.                 success : **function**(json) \{  
12.                     **if** (json.status == "succ") \{  
13.                         doQuery();  
14.                         Modal.alert(\{  
15.                             msg : "操作成功"  
16.                         \});  
17.                         $("\#addAdminDialog").modal('hide');  
18.                     \} **else** \{  
19.                         Modal.alert(\{  
20.                             msg : json.msg  
21.                         \});  
22.                     \}  
23.                 \},  
24.                 error : **function**() \{  
25.                     Modal.alert(\{  
26.                         msg : "操作失败"  
27.                     \});  
28.                 \}  
29.             \});  
30.         \}</span>

## 四、效果图 ##

![Center][]

![Center 1][]

[view plain]: http://blog.csdn.net/biedazhangshu/article/details/50729553#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/1586649
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/1586649/fork
[Center]: /images/20220617/b423ce02bc5c4a03a2a732e612538272.png
[Center 1]: /images/20220617/f8a75ee1aa6540d586f5dcf501b81e09.png