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

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


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