频道导航

BootstrapValidator不触发校验的实现代码

2019-01-01 Bootstrap 前端之家

前端之家收集整理的这篇文章主要介绍了BootstrapValidator不触发校验的实现代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

一、前言

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

二、问题描述

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

三、项目代码

1、JSP中

2、JS

管理员前台校验 $("#addAdminForm").bootstrapValidator({ message: 'This value is not valid',//反馈图标 FeedbackIcons:faIcon,fields: { loginName:{ message:'登录名无效',validators:{ notEmpty:{ message:'登录名不能为空' },StringLength:{ min:5,max:30,message:'用户名长度大于6位并且小于30位' },regexp:{ regexp:/^[a-zA-Z0-9_]+$/,message:'用户名只能由字母、数字和下划线' } } },userName: { message: '用户名格式不正确',validators: { notEmpty: { message: '用户名不能为空' },stringLength: { min: 6,max: 30,message: '用户名长度大于6位并且小于30位' },regexp: { regexp: /^[a-zA-Z0-9_]+$/,message: '用户名只能由字母、数字和下划线' } } },password: { validators: { notEmpty: { message: '邮箱不能为空' },emailAddress: { message: '输入的不是一个有效的电子邮件地址' } } } } });

<span style="font-size:14px;">// 新增操作员
function addAdmin() {
/手动验证表单，当是普通按钮时。/
$('#addAdminForm').data('bootstrapValidator').validate();
if(!$('#addAdminForm').data('bootstrapValidator').isValid()){
return ;
}
$("#addAdminForm").ajaxSubmit({
dataType : 'json',type : "post",success : function(json) {
if (json.status == "succ") {
doQuery();
Modal.alert({
msg : "操作成功"
});
$("#addAdminDialog").modal('hide');
} else {
Modal.alert({
msg : json.msg
});
}
},error : function() {
Modal.alert({
msg : "操作失败"
});
}
});
}