BootstrapValidator 解决多个相同name的元素的自定义校验
2017-12-05 17:34
411 查看
1. 首先我们来看一下,BootstrapValidator中验证信息的几个重要属性:
提示语small标签的属性:
1.data-bv-validator :自定义校验
2.style="display:none":验证通过,隐藏提示语
3.data-bv-result:提示语颜色: (VALID---表示绿色;INVALID---表示红色)
div中的class属性:
hsa-error:提示语颜色:红色
has-success:提示语颜色:绿色
2. 简单了解几个重要属性,让我们来看看真真正正的干货,是如何手动实现校验多个name相同的元素:
JS源码如下:
//jobName keyup事件 function jobNameKeyup(e){ var jobName = $(e).val(); var jobId = $(e).next().val(); var jobDiv = $(e).parent().parent().parent(); var jobSmall = $(e).parent().parent().next().children().eq(0); var jobSmallExist = $(e).parent().parent().next().children().eq(1); if(jobName.length>0){ jobDiv.attr("class", "job_container form-group has-success"); jobSmall.attr("data-bv-result","VALID"); jobSmall.attr("style","display: none;"); //职位是否存在 $.ajax({ type : 'POST', async:false, data : { jobName:jobName, jobId:jobId }, url : BASE_PATH+'/admin/authority/checkJobNameExist.html', success : function(data) { var isExist = data.valid+""; if(isExist=="true"){//不重复 jobDiv.attr("class", "job_container form-group has-success"); jobSmallExist.attr("data-bv-result","VALID"); jobSmallExist.attr("style","display: none;"); }else{//已存在 jobDiv.attr("class", "job_container form-group has-error"); jobSmallExist.attr("data-bv-result","INVALID"); jobSmallExist.attr("style","display: block;"); } } }); }else{ jobDiv.attr("class", "job_container form-group has-error"); jobSmall.attr("data-bv-result","INVALID"); jobSmall.attr("style","display: block;"); jobSmallExist.attr("data-bv-result","VALID"); jobSmallExist.attr("style","display: none;"); } } //校验所有职位 function validateJobName(){ //遍历所有jobName,校验 $("input[name='jobName[]']").each(function(index,e){ jobNameKeyup(e); }); } //保存时校验 function validateSave(){ var hasClass = false; $('div.job_container').each(function(index,e){ hasClass = $(e).hasClass("has-error"); if(hasClass){ return false; } }); return hasClass; } //校验职位权限是否为空 function validateFuc(){ var jobFunBoolean = ""; $(".job_container").each(function(index,container){ var jobName = $(container).find("input[id='jobName']").val(); var treeObj = $.fn.zTree.getZTreeObj("tree_" + index); var nodes = treeObj.getCheckedNodes(true); var funcIds = "" ; $(nodes).each(function(i,node){ funcIds += node.id + ","; }); if(funcIds==""){ jobFunBoolean += jobName+",";//表示没有功能 } }); var nameStr = ""; var jobNames = jobFunBoolean.split(","); $.each(jobNames, function(i,name){ if(name!=""){ nameStr += name +","; } }); if(nameStr.length>1){ jobFunBoolean = nameStr.substring(0, nameStr.length-1); //职位权限为空的职位 jobFunBoolean = "职位:"+jobFunBoolean +" 的职位权限不能为空"; }else{ jobFunBoolean = ""; } return jobFunBoolean; }
注: 实现思路 》》》Form表单验证神器:
BootstrapValidator
1. 认真分析其校验过程,发现三个重要的属性“data-bv-validator ”、“data-bv-result”和Div上的“hsa-error”
2. 考虑手动添加small标签,自定义配置BoostrapValidator验证的属性值
3. 剩下的事就是考虑项目的业务逻辑,完成多重校验
相关文章推荐
- 使用HashSet和TreeSet存储多个商品信息,遍历并输出;其中商品属性:编号,名称,单价,出版社;要求向其中添加多个相同的商品,验证集合中元素的唯一性。 提示:向HashSet中添加自定义
- 【JQ】 validate验证表单时多个name相同的元素的解决办法
- jquery validate 如何校验多个相同name
- 解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
- jQuery一个元素绑定多个相同事件的解决
- ajax的重复提交问题,和bootstrapValidator校验冲突问题解决办法
- bootstrapvalidator+bootstrap-select select无法校验问题解决方法
- jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
- JqueryValidate表单相同Name不校验问题解决
- Java编程之TreeSet排序两种解决方法(1)元素自身具备比较功能,元素需要实现Comparable接口覆盖compare(2)创建根据自定义Person类的name进行排序的Comparator
- bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
- FZU 2218 Simple String Problem (状压DP解决集合不相同元素问题)
- bootstrapValidator基本页面与模态框校验
- iOS多个链接库冲突的解决办法(重复使用相同的开源代码)
- IE9 使用document.getElementsByName("abc") 不能获取到名称相同SPAN元素
- 怎样解决支持同一元素句柄可以绑定多个监听函数问题?
- 利用Spring AOP自定义注解解决日志和签名校验
- bootstrap-validator自定义验证规则,修改验证事件为blur
- meta-data合并相同name元素
- BootstrapValidator 校验动态插入的元素以及自定义函数校验