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
- BootstrapValidator 解决多个相同name的元素的自定义校验
- post多个相同name的元素值获取
- jQuery一个元素绑定多个相同事件的解决
- bootstrapValidator自定义校验
- 利用ajaxSubmit提交的时候,解决多个input name相同的问题
- jquery validate 如何校验多个相同name
- Jquery validate验证表单时多个name相同的元素只验证第一个的问题
- jquery.validate.js,多个name属性相同的验证
- jquery validate 多个相同name的文本框验证
- django request 获取多个相同name的value值
- name相同的input是个集合
- BootstrapValidator 解决多属性被同时校验问题
- Jquery validate验证表单时多个name相同的元素
- html form 提交多个相同name的input标签到action,html提交多个相同实体的对象
- jquery validate不能验证多个相同的Name 只验证第一个的方案
- jquery 获取多个具有相同name的checkbox的选中的值
- 从页面获取多个相同name的input文本框的值的方法
- springmvc用实体类接收form表单提交多个name相同的input的值
- java类中serialversionuid 作用 是什么?举个例子说明
- ECMA-262-5 词法环境:通用理论(四)--- 环境
- hdu 1002 A + B Problem II 大整数相加
- oracle数据库导入由DBA导出的文件
- linux用户shell无法自动补全
- BootstrapValidator 解决多个相同name的元素的自定义校验
- 下拉多选编辑初始值加载赋值
- 最新 Spring 4.2.2 集成 Quartz Scheduler 2.2.2 任务调度示例
- json——工具类
- Java transient关键字使用
- Struts2中 action VS Action类
- Mysql的查询总结
- jquery-confirm自定义alert插件,alert显示内容可以换行
- 500G JAVA视频网盘分享 (JEECG开源社区)