BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析


Posted in Javascript onDecember 01, 2016

问题1:

如下代码:

<input type="hidden" name="productId"/>
$("#addForm").bootstrapValidator({
fields: {
productId: {
validators: {
notEmpty: {
message: '请选择一个商品'
}
}
}
}
});

这样的配置并没有在提交的时候对表单元素productId进行验证,那是因为bootstrapValidator默认配置对于“隐藏域(:hidden)、禁用域(:disabled)、那啥域(:not(visible))”是不进行验证的。

解决方法:

$("#addForm").bootstrapValidator({
//excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
excluded:[":disabled"],//关键配置,表示只对于禁用域不进行验证,其他的表单元素都要验证
fields: {
productId: {
validators: {
notEmpty: {
message: '请选择一个商品'
}
}
}
}
});

问题2:

我们往往会有这样的需求,如下图:

BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析

在选择商品之后会在productName里面展示商品名称给用户看,而在productId这个隐藏域里面放一个商品的ID。

一般情况下这样的操作是由程序来完成的,

$("input[name='productId']").val(data.productId);

bootstrapValidator这个插件不能捕获这样的“程序赋值事件”,所以这里不能达到验证的效果,所以我们需要做一个小小的变通:

$("#addForm").bootstrapValidator({
//excluded:[":hidden",":disabled",":not(visible)"] ,//bootstrapValidator的默认配置
excluded:[":disabled"],//关键配置,表示只对于禁用域不进行验证,其他的表单元素都要验证
fields: {
productId: {
trigger:"change", //问题2.关键配置
validators: {
notEmpty: {
message: '请选择一个商品'
}
}
}
}
});
//赋值之后触发一次“change”事件
$("input[name='productId']").val(data.productId).change();

这样以后bootrapValidator会因为触发了“change”事件,而捕获,达到验证的效果

以上所述是小编给大家介绍的BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
Bootstrap Scrollspy源码学习
Mar 02 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
JS闭包经典实例详解
Dec 20 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
JS实现数组深拷贝的方法分析
Mar 06 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
五句话帮你轻松搞定js原型链
Dec 09 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 #Javascript
jsTree使用记录实例
Dec 01 #Javascript
Vue.JS入门教程之列表渲染
Dec 01 #Javascript
Vue.JS入门教程之处理表单
Dec 01 #Javascript
利用js获取下拉框中所选的值
Dec 01 #Javascript
js微信扫描二维码登录网站技术原理
Dec 01 #Javascript
Bootstrap的class样式小结
Dec 01 #Javascript
You might like
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
浅谈PHP的排列组合(如输入a,b,c 输出他们的全部组合)
2017/03/14 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
vue+iview使用树形控件的具体使用
2020/11/02 Javascript
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
python基于itchat实现微信群消息同步机器人
2017/02/27 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
python中使用asyncio实现异步IO实例分析
2021/02/26 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
春季运动会开幕词
2015/01/28 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android