jquery.validate.js-秋月博客

一、源码 <!DOCTYPE html><html><head><meta charset="UTF-8" /><title>jquery.validate.js ajax请求form表单验证</ti

一、源码

<!DOCTYPE html><html>	<head>		<meta charset="UTF-8" />		<title>jquery.validate.js ajax请求form表单验证</title><style type="text/css">#validate_error_message {	color:#FF5353;}</style>	</head>	<body>			<form id="validate">				<div>					<input type="text" name="age" id="age"/>				</div>				<div id="validate_error_message"></div>				<div class="btn-group">					<button type="submit" class="btn btn-primary">提交</button>				</div>			</form>		<script src="vendor/jquery-1.9.0.min.js"></script>		<script src="../jquery.validate.js"></script>		<script>			jQuery.extend(jQuery.validator.messages, {			        required: "必选字段",					remote: "请修正该字段",					email: "请输入正确格式的电子邮件",					url: "请输入合法的网址",					date: "请输入合法的日期",					dateISO: "请输入合法的日期 (ISO).",					number: "请输入合法的数字",					digits: "只能输入整数",					creditcard: "请输入合法的信用卡号",					equalTo: "请再次输入相同的值",					accept: "请输入拥有合法后缀名的字符串",					maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),					minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),					rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),					range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),					max: jQuery.validator.format("请输入一个最大为 {0} 的值"),					min: jQuery.validator.format("请输入一个最小为 {0} 的值")			});//覆盖validator.defaults中的一些属性，jquery extend高级用法jQuery.extend(jQuery.validator.defaults, {    errorElement: "label"});			var validateRoles = {			rules : {				age : {					required : true,					maxlength : 60				}			},			messages : {				age: "提示信息我想放哪里就放哪里,提示信息样式也由我自己控制"			},			errorPlacement: function (error, element) {				console.log("css可以自己控制")				error.appendTo($("#validate_error_message") ); //这里的element是录入数据的对象			}	};			$("#validate").validate(validateRoles);		$(".btn-primary").bind("click", function() {			var submitForm = $("#validate");			console.log("dd")			if (submitForm.valid() == false) {				 console.log("ajaxform表单验证就那么神奇地发生了");				return false;			}else {				return false;			}		});		</script>	</body></html>

二、jquery.extend用法

如上代码中自定义错误信息地方，样式定都是通过jquery.extend实现，Jquery的扩展方法extend是我们在写插件或者使用插件的过程中常用的方法，由于扩展插件中的方法或者属性或者覆盖插件中的方法或者属性。

三、ajax form表单请求的验证进行支持

通过valid()方法实现

	valid: function() {		var valid, validator, errorList;		if ( $( this[ 0 ] ).is( "form" ) ) {			valid = this.validate().form();		} else {			errorList = [];			valid = true;			validator = $( this[ 0 ].form ).validate();			this.each( function() {				valid = validator.element( this ) && valid;				if ( !valid ) {					errorList = errorList.concat( validator.errorList );				}			} );			validator.errorList = errorList;		}		return valid;	}

四、自定义错误包裹的标签

//覆盖validator.defaults中的一些属性，jquery extend高级用法jQuery.extend(jQuery.validator.defaults, {    errorElement: "label"});

五、验证默认信息中文转换

		jQuery.extend(jQuery.validator.messages, {			        required: "必选字段",					remote: "请修正该字段",					email: "请输入正确格式的电子邮件",					url: "请输入合法的网址",					date: "请输入合法的日期",					dateISO: "请输入合法的日期 (ISO).",					number: "请输入合法的数字",					digits: "只能输入整数",					creditcard: "请输入合法的信用卡号",					equalTo: "请再次输入相同的值",					accept: "请输入拥有合法后缀名的字符串",					maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"),					minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"),					rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),					range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),					max: jQuery.validator.format("请输入一个最大为 {0} 的值"),					min: jQuery.validator.format("请输入一个最小为 {0} 的值")			});

六、自定义错误信息提示的位置

			errorPlacement: function (error, element) {				console.log("css可以自己控制")				error.appendTo($("#validate_error_message") ); //这里的element是录入数据的对象			}

七、自定义错误信息样式

#validate_error_message {	color:#FF5353;}

八、只验证不提交表单

debug: true

九、api文档

http://www.runoob.com/jquery/jquery-plugin-validate.html

十、聚焦错误地方

			errorPlacement: function (error, element) {				element.focus();				error.appendTo($(".error_box")); //这里的element是录入数据的对象			}

十一、每次只显示一个错误

			errorPlacement: function (error, element) {				var errMessage = $(".error_box").text();				//每次只显示一个错误				if (common.isEmpty(errMessage)) {					element[0].focus();					error.appendTo($(".error_box")); //这里的element是录入数据的对象				}			}

十二、检查隐藏域hidden

为什么要检查域呢？有时候我们项目中会使用一些自定义的下拉复选框等，这些通常需要通过自定义验证规则来实现，这时候我们可能需要通过hidden来定制规则。jquery.validate.js在1.9以后默认关闭了对hidden隐藏域的检查。

	//覆盖validator.defaults中的一些属性，jquery extend高级用法	jQuery.extend(jQuery.validator.defaults, {		errorElement: "label",		ignore: ""//检查隐藏域忽略	});

十三、添加自定义验证

	// 添加自定义验证,验证下拉,将自定义下拉的验证借挂在其他输入框,通过attr关联	jQuery.validator.addMethod("zcode_selected", function (value, element) {		var $element = $(element);//dom对象转为jquery对象		var selectedId =  $element.attr("selectedId");		value = $("#" + selectedId).find("i").attr("current-data-val") || "-1";		var flag =  value !== "-1";		if (flag === false) {			setTimeout(function () {				$(".error_box").text("");			}, 3000);		}		return flag;	}, "下拉不允许为空");

目录CONTENT

jquery.validate.js