BootstrapValidator不触发校验的实现代码


Posted in Javascript onSeptember 28, 2016

一、前言

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

二、问题描述

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

三、项目代码

1、JSP中

<span style="font-size:14px;"><div id="addAdminDialog" class="modal fade" tabindex="-1"> 
<div class="modal-dialog cy-modal-dialog-f"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button class="close" data-dismiss="modal"><span>×</span></button> 
<h4 class="modal-title" id="myLargeModalLabel">新增管理员</h4> 
</div> 
<div class="modal-body"> 
<form id="addAdminForm" method="post" action="${ctx}/admin/operator/add.htm" class="form-horizontal"> 
<div class="form-group"> 
<label class="form-label text-bold" for="">登录名</label> 
<input class="form-control" placeholder="" type="text" name="loginName" id="addLoginName"/> 
</div> 
<div class="form-group"> 
<label class="form-label text-bold" for="">用户名</label> 
<input class="form-control" placeholder="" type="text" name="userName" id="addUserName" /> 
</div> 
<div class="form-group"> 
<label class="form-label text-bold" for="">密码</label> 
<input class="form-control" placeholder="" type="password" name="password" id="addPassword" /> 
</div> 
<div class="form-group"> 
<label class="form-label text-bold" for="">角色</label> 
<div class="form-group"> 
<div class="col-md-10 col-xs-10"> 
<div class="checkbox cy-nopadding" id="addRoles"> 
<c:forEach var="role" items="${roles}"> 
<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> 
</c:forEach> 
</div> 
</div> 
</div> 
</div> 
</form> 
</div> 
<!--Modal footer--> 
<div class="modal-footer"> 
<button class="btn btn-primary" onclick="addAdmin();">确定</button> 
<button data-dismiss="modal" class="btn btn-default" type="button">取消</button> 
</div> 
</div> 
</div> 
</div></span>

2、JS

<span style="font-size:14px;">var faIcon = { 
valid: 'glyphicon glyphicon-ok', 
invalid: 'glyphicon glyphicon-remove', 
validating: 'glyphicon glyphicon-refresh' 
} 
//新增管理员前台校验 
$("#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> 

<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 : "操作失败" 
}); 
} 
}); 
}</span>

四、效果图

BootstrapValidator不触发校验的实现代码

BootstrapValidator不触发校验的实现代码

以上所述是小编给大家介绍的BootstrapValidator不触发校验的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS中style属性
Oct 11 Javascript
JavaScript 面向对象的之私有成员和公开成员
May 04 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
Oct 25 Javascript
js实现图片推拉门效果代码实例
May 18 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 #Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 #Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 #Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 #Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 #Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 #Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 #Javascript
You might like
php目录操作函数之获取目录与文件的类型
2010/12/29 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
JS根据年月获得当月天数的实现代码
2014/07/03 Javascript
javascript数组详解
2014/10/22 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
详解Django框架中用context来解析模板的方法
2015/07/20 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
python小程序实现刷票功能详解
2019/07/17 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
银行先进个人事迹材料
2014/05/11 职场文书
人力资源管理求职信
2014/08/07 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
2015年维修工作总结
2015/04/25 职场文书
微信搭讪开场白
2015/05/28 职场文书
公司周年庆寄语
2019/06/21 职场文书
OpenCV实现反阈值二值化
2021/11/17 Java/Android