jquery validation

最新推荐文章于 2025-05-24 15:06:15 发布

ycchen

最新推荐文章于 2025-05-24 15:06:15 发布

阅读量408

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： validation jquery email function class date

本文链接：https://blog.csdn.net/ycchen/article/details/7269036

jquery 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何使用jQuery插件实现注册页面的验证功能，并通过jQuery.extend自定义错误提示文字，同时优化了表单的高亮和错误提示显示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下这个插件的用法，官网的例子命名不太好，走了很多弯路。弄个最常用的注册页面。

	$("#regfrm").validate({
		rules:{
			"reg[email]":  {
				required: true,
				email: true,
				remote: {
					url: _APP_+"/Index/canRegist",
					type:'POST'
				}
			},
			"reg[pwd]":{
				required: true,
				rangelength: [6,16]
			},
			"reg[rpwd]":{
				required: true,
				rangelength: [6,16],
				equalTo: "#reg-pwd"
			}
		},
		messages: {
			"reg[email]":  {
				required: "请输入注册使用的邮箱地址",
				email: "请输入正确的邮箱地址",
				remote: "该邮箱已经注册过了"
			},
			"reg[pwd]":{
				required: "请输入6-16位密码",
				rangelength:"请输入6-16位密码"
			},
			"reg[rpwd]":{
				required: "请输入6-16位确认密码",
				rangelength: "请输入6-16位确认密码",
				equalTo: "与上面的密码不一致，请重新输入"
			}
		}

	});

该插件有class验证的功能，除了默认的class，可以对一个rule添加class验证（addClassRules( name, rules )）。还有inline的规则。但一般会使用上面的做法。

其中 re[email] 这些值来自 <input type="text" name="re[email]"> 的name，所以官网有说明，但是这个name很容易混淆，例子也很容易混淆。这样就清楚多了。

remote 是ajax用的，php端返回一个‘true’的字符代表通过验证。

下面添加一些常用的

jQuery.extend(jQuery.validator.messages, {
    required: "请填写此项",
    remote: "Please fix this field.",
    email: "请输入正确的邮箱地址",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
    minlength: jQuery.validator.format("Please enter at least {0} characters."),
    rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
    range: jQuery.validator.format("Please enter a value between {0} and {1}."),
    max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
    min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});
	$("#pgform").validate({
		errorPlacement: function(error, element) {
			error.hide();
		}, 
		highlight: function(element, errorClass, validClass) {
			var $elm = $(element);
			if( $elm.is(':checkbox') || $elm.is(':radio')  ){
				$elm.closest('.form-items').addClass('forms-error');
			}else{
				$elm.addClass(errorClass);
				$elm.closest('.form-item').addClass('form-error');
			}
		},
		unhighlight: function(element, errorClass, validClass) {
			var $elm = $(element);
			if( $elm.is(':checkbox') || $elm.is(':radio') ){
				$elm.closest('.form-items').removeClass('forms-error');
			}else{
				$elm.removeClass(errorClass);
				$elm.closest('.form-item').removeClass('form-error');
			}
			
		}

	});

第一个是替换默认错误提示的文字，用在validate之前。

valdate的配置是：

错误信息的位置显示，我弄成不显示信息。

错误高亮和正确高亮，这个可以弄很多不同的东西。我给父辈加了class。