jquery.validate.js

时间 2019-11-17

标签 jquery.validate.js jquery validate 栏目 JQuery 繁體版

原文原文链接

1、源码

<!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>

2、jquery.extend用法

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

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

经过valid()方法实现css

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;
	}

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

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

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

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} 的值")
			});

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

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

7、自定义错误信息样式

#validate_error_message {
	color:#FF5353;
}

8、只验证不提交表单

debug: true

9、api文档

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

10、聚焦错误地方

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

11、每次只显示一个错误

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

12、检查隐藏域hidden

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

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

十3、添加自定义验证

// 添加自定义验证,验证下拉,将自定义下拉的验证借挂在其余输入框,经过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;
	}, "下拉不容许为空");