BootStrap 动态添加验证项和取消验证项的实现方法


Posted in Javascript onSeptember 28, 2016

bootstrap 中的bootstrapValidator可以对前端的数据进行验证,但是有的时候我们需要动态的添加验证,这样需要我们动态的对bootstrapValidator的内容做修改。

传统的bootstrapValidator验证是

$('#MaintainEntryForm').bootstrapValidator({
message: '输入值无效!',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
Specifications: {
validators: {
notEmpty: { message: '请输入规格!' }
}
},
ProductNameEN: {
validators: {
notEmpty: { message: '请输入英文名称!' }
}
},
ApplyUnit: {
validators: {
notEmpty: { message: '请输入申报单位!' },
stringLength: {
min: 1,
max: 3,
message: '申报单位最多输入3位!'
}
}
},
SuttleWeight: {
validators: {
notEmpty: { message: '请输入净重!' },
//regexp: { regexp: /^\d{0,8}\.{0,1}(\d{1,3})?$/, message: '净重只能输入大于等于0的整数或者3位小数!' },
callback: {
message: '净重只能输入大于0的整数或者3位小数!',
callback: function (value, validator, $field) {
var reg = /^\d{0,8}\.{0,1}(\d{1,3})?$/;
return parseFloat(value) > 0 && reg.test(value);
}
}
}
}
}
}).on("success.form.bv", function (e) {
if (EntryInfo.SaveType == 1) {
EntryInfo.SaveEntryInfo();
}
else if (EntryInfo.SaveType == 2) {
EntryInfo.SaveAndSubmitAudit();
}
});

这样的验证在页面有交互的需求的时候不能够满足条件,所以我们需要动态的对验证条件进行修改,这里的做法是先把所有可能用到的条件先全部添加进去,在指定条件下去除筛选条件。

去除方式

$('#MaintainEntryForm').data('bootstrapValidator').validateField('ApplyUnit');

这样 名称为ApplyUnit的验证凡是就不会起作用了

对于已经提示报错信息的要去除验证信息的可以使用以下方式

$('#MaintainEntryForm').data('bootstrapValidator')
.updateStatus('ApplyQty', 'NOT_VALIDATED', null)
.validateField('ApplyQty');

这样页面对应的ApplyQty 字段后面验证信息就会消失 不用重置整个bootstrapValidator 就可以了

以上所述是小编给大家介绍的BootStrap 动态添加验证项和取消验证项的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 Javascript
js实现纯前端压缩图片
Nov 16 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 #Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 #Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 #Javascript
request请求获取参数的实现方法(post和get两种方式)
Sep 27 #Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 #Javascript
详解JavaScript权威指南之对象
Sep 27 #Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 #Javascript
You might like
PHP curl模拟浏览器采集阿里巴巴的实现代码
2011/04/20 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
PHP设计模式之模板方法模式实例浅析
2018/12/20 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
Javascript中string转date示例代码
2013/11/01 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
防止登录页面出现在frame中js代码
2014/07/22 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
vue this.reload 方法 配置
2018/09/12 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
python计算时间差的方法
2015/05/20 Python
Python yield 使用浅析
2015/05/28 Python
python生成excel的实例代码
2017/11/08 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
硕士研究生自我鉴定范文
2013/12/27 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
旷课检讨书3000字
2014/02/04 职场文书
关于环保的演讲稿
2014/05/10 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
运动会通讯稿100字
2015/07/20 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技