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 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
JS 修改URL参数(实现代码)
Jul 08 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
Node.js简单入门前传
Aug 21 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 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获取随机数字和字母的方法详解
2013/06/06 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
javascript Array对象基础知识小结
2010/11/16 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
深入浅析Python字符编码
2015/11/12 Python
Python将图片批量从png格式转换至WebP格式
2020/08/22 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
Python 解决相对路径问题:"No such file or directory"
2020/06/05 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
Python定义一个Actor任务
2020/07/29 Python
django创建css文件夹的具体方法
2020/07/31 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
局部内部类是否可以访问非final变量?
2013/04/20 面试题
大学四年规划书范文
2013/12/27 职场文书
银行员工辞职信范文
2014/01/20 职场文书
美德少年事迹材料
2014/01/23 职场文书
安全生产先进个人总结
2015/02/15 职场文书
田径运动会通讯稿
2015/07/18 职场文书
2015年汽车销售员工作总结
2015/07/24 职场文书
2016中秋节广告语
2016/01/28 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers