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 相关文章推荐
滚动图片效果 jquery实现回旋滚动效果
Jan 08 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
php eval函数用法总结
2012/10/31 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
Python中进程和线程的区别详解
2017/10/29 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
python基于递归解决背包问题详解
2019/07/03 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
如何理解python对象
2020/06/21 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
DIY手工制作经营店创业计划书
2014/02/01 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
警示教育观后感
2015/06/17 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书