jQuery Validate

最新推荐文章于 2018-11-14 11:02:41 发布

Kallen

最新推荐文章于 2018-11-14 11:02:41 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Java SE 文章标签： jquery javascript validate js dom

本文链接：https://blog.youkuaiyun.com/kallen_ding/article/details/23297987

Java SE 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用jQuery Validate插件进行表单验证的实战案例，详细展示了如何设置验证规则及错误消息，实现对用户名、邮箱、电话等字段的有效验证。

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

需要JQuery版本：1.2.6+, 兼容 1.3.2

//开始验证
$('#submitForm').validate({
/**//* 设置验证规则 */
rules: {
username: {
required:true,
stringCheck:true,
byteRangeLength:[3,15]
},
email:{
required:true,
email:true
},
phone:{
required:true,
isPhone:true
},
address:{
required:true,
stringCheck:true,
byteRangeLength:[3,100]
}
},

/** 设置错误信息 */
messages: {
username: {
required: "请填写用户名",
stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",
byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
},
email:{
required: "请输入一个Email地址",
email: "请输入一个有效的Email地址"
},
phone:{
required: "请输入您的联系电话",
isPhone: "请输入一个有效的联系电话" //这里引用addMethod方法中的name属性
},
address:{
required: "请输入您的联系地址",
stringCheck: "请正确输入您的联系地址",
byteRangeLength: "请详实您的联系地址以便于我们联系您"
}
},

/* 设置验证触发事件 */
focusInvalid: false,
onkeyup: false,

/** 设置错误信息提示DOM */
errorPlacement: function(error, element) {
error.appendTo( element.parent());
},

});

});

以下为个人的完整案例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Emp Info Validate 2</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="../js/jquery.validate.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="../css/screen.css" />
    <style type="text/css">
    	h3 {
    		text-align: center;
    		color: lightseagreen;
     	}

    	table {
    		border: 1px solid grey; 
    		text-align: left;
    		margin: 0 auto;
    		background-color: lightsteelblue;
    		width: 18em;
    	}
    </style>
    <script type="text/javascript">
    $().ready(function() {
    	$("#empForm").validate({
    		rules:{
    			userName: {
    				required: true,
    				rangelength: [5, 8]
    			},
    			realName: {
    				required: true
    			},
    			pwd: {
    				required: true,
    				rangelength: [6, 12]
    			},
    			pwd2: {
    				required: true,
    				rangelength: [6, 12],
    				equalTo: "#pwd"
    			},
    			age: {
    				required: true,
    				range: [18, 50]
    			},
    			birthday: {
    				required: true,
    				date: true
    			},
    			email: {
    				required: true,
    				email: true
    			}
    		}, 
    		messages:{
    			userName: {
    				required: "登陆名不能为空",
    				rangelength: "登陆名长度应该在5-8之间"
    			},
    			realName: {
    				required: "真实姓名不能为空"
    			},
    			pwd: {
    				required: "密码不能为空",
    				rangelength: "密码长度应该在6-12之间"
    			},
    			pwd2: {
    				required: "确认密码不能为空",
    				rangelength: "确认密码长度应该在6-12之间",
    				equalTo: "两次输入的密码不一致"
    			},
    			age: {
    				required: "年龄不能为空",
    				range: "年龄应该在26-50之间"
    			},
    			birthday: {
    				required: "出生日期不能为空",
    				date: "出生日期的格式不对"
    			},
    			email: {
    				required: "电子邮件不能为空",
    				email: "必须输入正确的电子邮件"
    			}
    		}
    	});
    });
    </script>
  </head>
  
  <body>
  	<h3>Emp Validate 2</h3>
  	<br/>
    <form id="empForm" name="empForm" method="post" action="">
    	<table cellpadding="0" cellspacing="15">
    		<tr>
    			<td>UserName:</td>
    			<td><input type="text" id="userName" name="userName"/></td>
    		</tr>
    		<tr>
    			<td>RealName:</td>
    			<td><input type="text" id="realName" name="realName"/></td>
    		</tr>
    		<tr>
	    		<td>Password:</td>
	    		<td><input type="password" id="pwd" name="pwd"/></td>
    		</tr>
    		<tr>
	    		<td>Confirm:</td>
	    		<td><input type="password" id="pwd2" name="pwd2"/></td>
    		</tr>
    		<tr>
    			<td>Gender:</td>
    			<td>
    				<input type="radio" name="gender" id="gender_M" value="M"/>Male
    				<input type="radio" name="gender" id="gender_F" value="F"/>Female
    			</td>
    		</tr>
    		<tr>
    			<td>Age:</td>
    			<td><input type="text" id="age" name="age"/></td>
    		</tr>
    		<tr>
    			<td>Birthday:</td>
    			<td><input type="text" id="birthday" name="birthday"/></td>
    		</tr>
    		<tr>
    			<td>E-mail:</td>
    			<td><input type="text" id="email" name="email"/></td>
    		</tr>
    		<tr>
    			<td></td>
    			<td><input type="submit" id="firstname" name="firstname" value="Submit"/></td>
    		</tr>
    	</table>
    </form>
  </body>
  
  <script type="text/javascript">
  	$("h3").each(function(index, domEle) {
  		$(domEle).click(function() {
  			$(domEle).next().slideToggle("slow");
  		});
  	});
  </script>
</html>