jquery validate动态增加、删除验证规则

最新推荐文章于 2023-08-11 16:30:25 发布

weixin_33915554

最新推荐文章于 2023-08-11 16:30:25 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/230843/blog/2988034

本文介绍了jQuery Validate插件如何动态地添加和删除验证规则，提供了详细的示例，包括添加`minlength`规则和自定义错误消息。在实际项目中，根据【发票类型】的选择，动态设置了【价税合计】和【校验码】的验证规则。

2019独角兽企业重金招聘Python工程师标准>>>

.rules()用于动态添加验证规则

文档：https://jqueryvalidation.org/rules/#rules-%22remove%22-rules
rules( "add", rules )
"add"
Type: String
rules( "remove", rules )
"remove"
Type: String

Example:

Example: Adds minlength: 2 to an element which is already required.
$( "#myinput" ).rules( "add", {
minlength: 2
});
Example: Adds required and minlength: 2 to an element and specifies custom messages for both.
$( "#myinput" ).rules( "add", {
required: true,
minlength: 2,
messages: {
required: "Required input",
minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
}
});
Example: Removes all static rules from an element.
$( "#myinput" ).rules( "remove" );
$( "#myinput" ).rules( "remove", "min max" );

项目实践

根据【发票类型】的选值，动态设置【价税合计】、【校验码】验证规则

   <script type="text/javascript">
		var prefix = ctx + "invoice/invIncomeInvoice"
		$("#form-invIncomeInvoice-add").validate({
			debug: true,
			rules : {
				invoiceType : {
					required : true,
					check_invoiceType : true
				},
				invoiceCode : {
					required : true,
					check_invoiceCode : true
				},
				invoiceNo : {
					required : true,
					check_invoiceNo : true
				},
				invoiceDate : {
					required : true,
					dateISO : true
				}
			}

		});


		var errorClass = 'error';
		/**为字段追加验证规则*/
		$.validator.addMethod("check_invoiceType",function(value,element,params){
			if(value=='page_special_invoice'){
				$("#totalTax").rules( "add", {
					required : true,
					check_totalTax : true
		        });
				$("#antiFakeCode").rules( "remove" );
				//$("#antiFakeCode").rules( "remove", "min max" );
				//$("#antiFakeCode-error").text("").removeClass("err icon-reg-err").addClass("scc icon-reg-scc");
		        //$("#antiFakeCode").removeClass(errorClass);
		        //$("#antiFakeCode").parents('div:first').children('label').removeClass(errorClass);
		        $("#antiFakeCode").removeClass(errorClass);
		        $("#antiFakeCode-error").remove();
			} else {
				$("#totalTax").rules( "remove" );
				$("#antiFakeCode").rules( "add", {
					required : true,
					maxlength : 20
		        });
				//$("#totalTax-error").text("").removeClass(errorClass).addClass("scc icon-reg-scc");
		        //$("#totalTax").removeClass(errorClass);
		        //$("#totalTax").parents('div:first').children('label').removeClass(errorClass);
		        $("#totalTax").removeClass(errorClass);
		        $("#totalTax-error").remove();
			}
			return true;
		},"");
		
		$.validator.addMethod("check_invoiceCode",function(value,element,params){
				var check = /\d{6,15}$/;
				return this.optional(element)||(check.test(value));
			},"*只允许8-15位数字！");
		$.validator.addMethod("check_invoiceNo",function(value,element,params){
				var check = /\d{6,15}$/;
				return this.optional(element)||(check.test(value));
			},"*只允许8-15位数字！");
		
		$.validator.addMethod("check_totalTax",function(value,element,params){
				var check =  /^\d+\.?\d{0,2}$/;
				var invoiceType = $("#invoiceType").val();
				if(invoiceType=='page_special_invoice'){
					return this.optional(element)||(check.test(value));
				}
				return true;
			},"*保留两位小数的金额！");

		function submitHandler() {
	        if ($.validate.form()) {
	            $.operate.save(prefix + "/add", $('#form-invIncomeInvoice-add').serialize());
	        }
	    }
	</script>

转载于:https://my.oschina.net/u/230843/blog/2988034