validate 动态验证 根据name值验证

最新推荐文章于 2022-09-07 18:24:07 发布
最新推荐文章于 2022-09-07 18:24:07 发布
阅读量371 收藏
点赞数
文章标签： javascript validate
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35800150/article/details/73649192
版权
这篇博客介绍了一种在不修改源文件的情况下进行表单验证的方法。通过指定input框的name值（如constraintValues），可以动态地为所有具有该name属性的input元素添加验证。文中提供了一个完整的页面示例，展示如何实现这一功能。
摘要由CSDN通过智能技术生成

直接添加验证

$('#form').validate({
        		rules:{
        			paramName:{
        				required:true
        			},
        			paramRemark:{
        				required:true
        			},
        			paramType:{
        				required:true
        			},
        			constraintValues:{
        				required:true
        			},
        			constraintCondition:{
        				required:true
        			},
        			paramAttribute:{
        				required:true
        			}
        		},
        		messsages:{
        			paramName:{
        				required:"必填项"
        			},
        			paramRemark:{
        				required:"必填项"
        			},
        			paramType:{
        				required:"必填项"
        			},
        			constraintValues:{
        				required:"必填项"
        			},
        			constraintCondition:{
        				required:"必填项"
        			},
        			paramAttribute:{
        				required:"必填项"
        			}
        		}
        	});

动态添加验证 ， 用add  
$("#paramValue").rules("add",{required:true});  

if(max){
        		$("#paramValue").rules("add",{required:true, range: [min,max]});  
        	} else {
        		$("#paramValue").rules("add",{required:true});  
        	}

根据name值验证，这儿借鉴了网上的方法 点击打开链接，原作者说了两种方法，修改源文件和在当前js加判断 两种方法

这儿采用的是不修改源文件的情况下验证，首先要初始化添加一个判断

//validate  根据name验证 不修改源码
        	if ($.validator) {
   	           $.validator.prototype.elements = function () {
   	               var validator = this,
   	                 rulesCache = {};
   	 
   	               // select all valid inputs inside the form (no submit or reset buttons)
   	               return $(this.currentForm)
   	               .find("input, select, textarea")
   	               .not(":submit, :reset, :image, [disabled]")
   	               .not(this.settings.ignore)
   	               .filter(function () {
   	                   if (!this.name && validator.settings.debug && window.console) {
   	                       console.error("%o has no name assigned", this);
   	                   }
   	                   //注释这行代码
   	                   // select only the first element for each name, and only those with rules specified
   	                   //if ( this.name in rulesCache || !validator.objectLength($(this).rules()) ) {
   	                   //    return false;
   	                   //}
   	                   rulesCache[this.name] = true;
   	                   return true;
   	               });
   	           }
   	        }
添加过判断之后，就可以添加验证

其中constraintValues为form表单中input框的name值，这样就把所有name为constraintValues的input框全部添加验证

$('#form').validate({
            		rules:{
            			constraintValues:{
            				required:true
            			}
            		},
            		messages:{
            			constraintValues:{
            				required:"必填项"
            			}
            		}
            	});


顺便贴上整个页面供参考

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../../base/taglib.jsp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Head -->
<head>
    <%@include file="../../base/headerLink.jsp" %>
    <%@include file="../../base/headerLink.jsp" %>
</head>
<!-- /Head -->
<!-- Body -->
<body>
<div class="main-container container-fluid">
    <div class="row">
        <form:form id="form" method="post" class="form-horizontal" role="form" commandName="profile">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">

            <div class="widget">
                <div class="widget-body">
                    <div class="form-group" hidden="true">
                        <form:label path="sysParamId" class="col-lg-4 control-label">参数ID</form:label>
                        <div class="col-lg-4">
                            <c:if test="${profile.sysParamId!=null}">
                            	<form:input type="text" class="form-control" readonly="true" path="sysParamId"/>
                            </c:if>
                            <c:if test="${profile.sysParamId==null}">
                                <form:input type="text" class="form-control" path="sysParamId"/>
                            </c:if>
                        </div>
                    </div>
                    <div class="form-group">
                        <form:label path="paramName" class="col-lg-4 control-label">参数名称</form:label>
                        <div class="col-lg-4">
                        	<c:if test="${profile.paramName!=null}">
                        		<form:input type="text" class="form-control" readonly="true"  data-validatebox="validType:['required']" path="paramName"/>
                        	</c:if>
                        	<c:if test="${profile.paramName==null}">
                        		<form:input type="text" class="form-control" data-validatebox="validType:['required']" path="paramName"/>
                        	</c:if>
                            
                        </div>
                    </div>
                    <div class="form-group">
                        <form:label path="paramValue" class="col-lg-4 control-label">参数值</form:label>
                        <div class="col-lg-4">
                        	<c:if test="${list != null}">
                        		<form:select class="form-control" path="paramValue">
	                                <form:options items="${list}"></form:options>
                            	</form:select>
                        	</c:if>
                        	<c:if test="${list == null}">
                        		<form:input type="text" class="form-control" path="paramValue"/>
                        	</c:if>
                        	
                        </div>
                    </div>
                    <div class="form-group">
                        <form:label path="constraintValue"  class="col-lg-4 control-label">约束值</form:label>
                        <c:if test="${profile.constraintValue==null}">
	                        	<input type="button" οnclick="add()" value="添加" id="addId" hidden="true" />
                        </c:if>
                        
                        <div class="col-lg-4" id="value">
	                        <c:if test="${profile.constraintValue!=null}">
	                        	<form:input type="text" class="form-control" readonly="true" path="constraintValue"/>
	                        </c:if>
	                        <%-- <c:if test="${profile.constraintValue==null}">
	                        	<form:input type="text" class="form-control" path="constraintValue"/>
	                        </c:if> --%>
                        
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="col-sm-10">
                            <button type="submit" class="btn btn-blue btn-sm">${op}</button>
                            <button type="button" οnclick="window.history.go(-1);" class="btn btn-blue btn-sm">返回
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">

            <div class="widget">
                <div class="widget-body">
	
					<div class="form-group">
                        <form:label path="paramRemark" class="col-lg-4 control-label">参数备注</form:label>
                        <div class="col-lg-4">
                        	<c:if test="${profile.paramRemark!=null}">
                        		<form:input type="text" class="form-control" readonly="true" path="paramRemark"/>
                        	</c:if>
                        	<c:if test="${profile.paramRemark==null}">
                        		<form:input type="text" class="form-control" path="paramRemark"/>
                        	</c:if>
                        </div>
                    </div>
                    <div class="form-group">
                        <form:label path="paramType" class="col-lg-4 control-label">参数类型</form:label>
                        <div class="col-lg-4">
                        	<c:if test="${profile.paramType!=null}">
                        		<form:select class="form-control" disabled="true" path="paramType">
	                                <form:option value="1">字符串</form:option>
	                                <form:option value="2">整型</form:option>
	                                <form:option value="3">日期型</form:option>
	                                <form:option value="4">浮点型</form:option>
	                            </form:select>
                        	</c:if>
                        	<c:if test="${profile.paramType==null}">
                        		<form:select class="form-control" path="paramType">
	                                <form:option value="1">字符串</form:option>
	                                <form:option value="2">整型</form:option>
	                                <form:option value="3">日期型</form:option>
	                                <form:option value="4">浮点型</form:option>
	                            </form:select>
                        	</c:if>
                            
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <form:label path="constraintCondition" class="col-lg-4 control-label">约束条件</form:label>
                        <div class="col-lg-4">
                        	<c:if test="${profile.constraintCondition!=null}">
	                        	<form:select class="form-control" disabled="true" path="constraintCondition">
	                                <form:option value="1">取值范围</form:option>
	                                <form:option value="2">特殊取值</form:option>
	                            </form:select>
	                        </c:if>
	                        <c:if test="${profile.constraintCondition==null}">
	                        	<form:select class="form-control" path="constraintCondition" id="constraintCondition">
	                                <form:option value="1">取值范围</form:option>
	                                <form:option value="2">特殊取值</form:option>
	                            </form:select>
	                        </c:if>
                        </div>
                    </div>
                    <div class="form-group">
                        <form:label path="paramAttribute" class="col-lg-4 control-label">权限</form:label>
                        <div class="col-lg-4">
                        <c:if test="${profile.paramAttribute!=null}">
                        	<form:select class="form-control" disabled="true" path="paramAttribute">
                                <form:option value="1">可见可编辑</form:option>
                                <form:option value="2">可见不可编辑</form:option>
                                <form:option value="3">不可见</form:option>
                            </form:select>
                        </c:if>
                        <c:if test="${profile.paramAttribute==null}">
                        	<form:select class="form-control" path="paramAttribute">
                                <form:option value="1">可见可编辑</form:option>
                                <form:option value="2">可见不可编辑</form:option>
                                <form:option value="3">不可见</form:option>
                            </form:select>
                        </c:if>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </form:form>
    </div>
    <%@include file="../../base/footerLink.jsp" %>
    <script src="<c:url value='/static/module/JQuery zTree v3.5.15/js/jquery.ztree.all-3.5.min.js'/>"></script>
    <script src="<c:url value='/static/assets/js/validation/jquery.validate.min.js'/>"></script>
    <%-- <script src="<c:url value='/static/assets/js/validation/prototype_for_validation.js'/>"></script>
    <script src="<c:url value='/static/assets/js/validation/validation_cn.js'/>"></script> --%>
    <script>
	    var max = '${max}',
	    	min = '${min}',
	    	list = '${list}';
        $(function () {
        	//validate  根据name验证 不修改源码
        	if ($.validator) {
   	           $.validator.prototype.elements = function () {
   	               var validator = this,
   	                 rulesCache = {};
   	 
   	               // select all valid inputs inside the form (no submit or reset buttons)
   	               return $(this.currentForm)
   	               .find("input, select, textarea")
   	               .not(":submit, :reset, :image, [disabled]")
   	               .not(this.settings.ignore)
   	               .filter(function () {
   	                   if (!this.name && validator.settings.debug && window.console) {
   	                       console.error("%o has no name assigned", this);
   	                   }
   	                   //注释这行代码
   	                   // select only the first element for each name, and only those with rules specified
   	                   //if ( this.name in rulesCache || !validator.objectLength($(this).rules()) ) {
   	                   //    return false;
   	                   //}
   	                   rulesCache[this.name] = true;
   	                   return true;
   	               });
   	           }
   	        }
        	
        	//初始化验证
        	$('#form').validate({
        		rules:{
        			paramName:{
        				required:true
        			},
        			paramRemark:{
        				required:true
        			},
        			paramType:{
        				required:true
        			},
        			constraintValues:{
        				required:true
        			},
        			constraintCondition:{
        				required:true
        			},
        			paramAttribute:{
        				required:true
        			}
        		},
        		messsages:{
        			paramName:{
        				required:"必填项"
        			},
        			paramRemark:{
        				required:"必填项"
        			},
        			paramType:{
        				required:"必填项"
        			},
        			constraintValues:{
        				required:"必填项"
        			},
        			constraintCondition:{
        				required:"必填项"
        			},
        			paramAttribute:{
        				required:"必填项"
        			}
        		}
        	});
        	
        	//为参数值添加动态验证
        	if(max){
        		$("#paramValue").rules("add",{required:true, range: [min,max]});  
        	} else {
        		$("#paramValue").rules("add",{required:true});  
        	}
        	
        	//动态验证 动态添加的input输入框 根据name添加验证
        	$("#value").delegate("input","change",function(){
        		$('#form').validate({
            		rules:{
            			constraintValues:{
            				required:true
            			}
            		},
            		messages:{
            			constraintValues:{
            				required:"必填项"
            			}
            		}
            	});
        	})
        	
        	if('${op}'=='新增'){
        		add();
        		add();
        	}
        	
        	//约束条件改变时触发事件
        	$('#constraintCondition').change(function(){
        		//将已添加的input框移除掉
        		$('#value').empty();
        		if($('#constraintCondition').val()==1){//取值范围
            		$('#addId').hide();
            		add();
            		add();
            	} else if($('#constraintCondition').val()==2){//特殊取值
            		$('#addId').show();
            		add();
            	}
        	})
        })
        
        //动态添加input框
        function add(){
		    var input1 = document.createElement('input');
		    input1.setAttribute('type', 'text');
		    input1.setAttribute('name', 'constraintValues');
		    //input1.setAttribute('path', 'constraintValue');
		    input1.setAttribute('form', 'form');
		    input1.setAttribute('class', 'form-control');
		    
		    var btn1 = document.getElementById("value");
		    btn1.insertBefore(input1,null);
		}
    </script>
</body>
<!--  /Body -->
</html>




qq_35800150
关注
jquery 的validate 动态添加验证规则 及 jquery选择器 name带变量
yuxuan89914的专栏
08-26 3007
在做项目中碰到一个问题：   一个table的行数不定，看数据库中的数据有多少行，则table出现多少行。这次的问题是，出现的行里，有部分是需要客户自己填的数据，而这些数据是必填的，这就需要我们去验证。这里面有两个难点：     1使用jquery 的validate插件进行输入框的验证，动态添加验证     2 因为相同列的input的那么会是一个数组形式，如name[0],name[1]
jquery的validate动态验证
hqmln的博客
07-29 550
  /* 动态添加验证 $("#dzName").rules("add",{ required: true,range:[1,100000000000], messages: { required: "必填项"} }); 动态删除验证 $("#dzName").rules("remove"); 判断验证是否全部通过 if(!$("#entInfoForm").valida
自定义validation注解：解决动态多字段联动校验问题
JAVA前线技术专栏
05-03 7878
欢迎大家关注公众号「JAVA前线」查看更多精彩分享文章，主要包括源码分析、实际应用、架构思维、职场分享、产品思考等等，同时欢迎大家加我个人微信「java_front」一起交流学习 1 文章概述 javax.validation是基于JSR-303标准定义的一组接口，目的是使开发者简洁地校验参数，hibernate-validator实现了这一组接口，可以作为工具独立引用。 <dependency> <groupId>javax.validation</groupI.
JqueryValidate对动态表单的验证
邢慧鹏的博客
05-05 1794
JqueryValidate 实现动态表单的验证
利用validate进行表单校验
u013469562的博客
10-23 2613
利用validate进行表单校验
jquery.validate 动态绑定项目校验
退休的呆毛
09-07 529
jquery.validate 动态绑定项目校验
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
10-20
在处理表单时，尤其是动态生成或复用name属性的表单元素时，可能会遇到一个问题：当多个元素的name属性相同，jQuery Validate 只会验证第一个元素，而忽略其他同名的元素。这在需要对每个同名元素进行单独验证的场景...
jQuery Validate插件ajax方式验证输入值的实例
10-18
当用户输入值后，jQuery Validate会自动将该值附加到URL后面，然后发起一个GET请求进行验证。 然而，实际的后端接口可能需要更复杂的处理，比如POST请求、额外的参数等。这时，我们可以自定义`remote`规则的配置： ...
jquery.validate表单验证插件使用详解
10-19
在本文中，我们将深入探讨jQuery Validate插件的使用方法，这是一个强大的JavaScript库，用于实现高效且用户友好的表单验证。...在实际项目中，根据需求调整和扩展这些规则，可以有效地提高表单验证的效率和准确性。
利用jQuery.Validate异步验证用户名是否存在（推荐）
10-20
jQuery.Validate插件提供了一个更为人性化的解决方案，它允许开发者实现异步验证，也就是说，可以在不离开当前页面的情况下，实时地检查用户名是否被占用。异步验证是通过AJAX（Asynchronous JavaScript and XML）...
jQuery Validate 数组 全部验证问题
10-20
在Web开发中，jQuery Validate是一个常用的JavaScript库，用于表单验证。它提供了丰富的验证规则和易于使用的API，帮助开发者确保用户输入的数据满足特定条件。然而，当遇到需要验证数组类型的输入时，可能会出现...
jquery validate 动态增加删除验证规则
热门推荐
走自己的路让别人来看
04-09 2万+
页面加载完成初始化form validate  $("#user_regForm").validate({ errorPlacement: function(error, element){ if(element.attr("id")=="province"||element.attr("id")=="city"||element.attr
jquery-validate动态添加表单元素动态验证
lytlx的专栏
04-18 6357
index $(function() { $('#testform').validate({ rules:{ name:"required" }
jQuery Validate 动态验证
LitongZero的博客
08-06 1419
使用jQuery Validate实现动态验证 $(function () { //实现选择框动态验证 $("#addModal select").change(function () { $("#addModal form").validate().element($(this)); }); //实现input动态验证 $("#ad...
jquery-validate动态添加表单元素后添加动态验证
guocunlei的博客
06-24 5454
一.前言 使用jquery-validate时，每次都是把需要验证的表单写死，然后进行验证。但是有些时候，我们需要动态的添加表单元素，然后还需要对这些动态添加的元素进行验证，这个时候就需要动态的去添加一下验证。 二.实现 没有加动态验证之前： // 添加验证 var validator = $("#form").validate({ // ...
jQuery Validate 表单元素动态校验的使用场景
cyadyx的博客
11-16 1245
jQuery Validate 表单元素动态校验的使用场景动态校验场景项目案例需求如图要求处理方法 动态校验场景 前端设计避免不了会出现各种信息校验相关操作，而方便，有效，实时的校验提醒业务也是很好的用户体验，jQuery Validate为表单校验工作提供了很好的开发体验，方便，简洁，满足所有的校验正则以及自定义规则。为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选...
Jquery validate验证表单时多个name相同的元素
oyh1203的专栏
10-18 1310
if ($.validator) { $.validator.prototype.elements = function () { var validator = this, rulesCache = {}; // select all valid inputs inside the form (no submit or reset butt
jQuery.validate 表单动态验证
aa1bb1cc2的专栏
06-18 428
实际上jQuery.validate提供了动态校验的方法。而动态拼JSON串的方式是不支持动态校验的。牺牲jQuery.validate的性能优化可以实现(jQuery.validate的性能优化见图1.2 jQuery.validate源码)。也可以选择使用jQuery.validate提供的动态校验方法。图1.1 需要校验的HTML页面js文件内容如下：varoTab=document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值