jQuery插件validate的使用记录

最新推荐文章于 2025-05-05 12:53:59 发布

原创最新推荐文章于 2025-05-05 12:53:59 发布 · 89 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用jQuery Validate插件自定义验证规则，实现对用户名、密码、重复密码及邮箱的校验，包括远程校验用户名是否已存在，确保密码长度符合要求，两次密码输入一致，以及检查邮箱格式。

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

① 导入：<s4cript src="js/jquery.validate.min.js" type="text/javascript"></script>

②自定义验证规则

<script type="text/javascript">
	
	//自定义校验规则
	$.validator.addMethod(
		//规则的名称
		"checkUsername",
		//校验的函数
		function(value,element,params){
			
			//定义一个标志
			var flag = false;
			
			//value:输入的内容
			//element:被校验的元素对象
			//params：规则对应的参数值
			//目的：对输入的username进行ajax校验
			$.ajax({
				"async":false,
				"url":"${pageContext.request.contextPath}/checkUsername",
				"data":{"username":value},
				"type":"POST",
				"dataType":"json",
				"success":function(data){
					flag = data.isExist;
				}
			});
			
			
			//返回false代表该校验器不通过
			return !flag;
		}
		
	);


	$(function(){
		$("#myform").validate({
			rules:{
				"username":{
					"required":true,
					"checkUsername":true
				},
				"password":{
					"required":true,
					"rangelength":[6,12]
				},
				"repassword":{
					"required":true,
					"rangelength":[6,12],
					"equalTo":"#password"
				},
				"email":{
					"required":true,
					"email":true
				},
				"sex":{
					"required":true
				}
			},
			messages:{
				"username":{
					"required":"用户名不能为空",
					"checkUsername":"用户名已存在"
				},
				"password":{
					"required":"密码不能为空",
					"rangelength":"密码长度6-12位"
				},
				"repassword":{
					"required":"密码不能为空",
					"rangelength":"密码长度6-12位",
					"equalTo":"两次密码不一致"
				},
				"email":{
					"required":"邮箱不能为空",
					"email":"邮箱格式不正确"
				}
			}
		});
	});

</script>