BootstrapValidator 解决多个相同name的元素的自定义校验

来源：互联网发布：java移动鼠标方法编辑：程序博客网时间：2024/06/16 02:58

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. 剩下的事就是考虑项目的业务逻辑，完成多重校验

阅读全文

0 0