JQuery Validator使用实例

最新推荐文章于 2017-07-29 18:30:03 发布

samnalove

最新推荐文章于 2017-07-29 18:30:03 发布

阅读量964

点赞数

分类专栏： jQuery 文章标签： jquery input function stylesheet email 手机

本文链接：https://blog.youkuaiyun.com/samnalove/article/details/7107985

版权

jQuery 专栏收录该内容

4 篇文章

订阅专栏

最近花时间看了看jQuery的validator插件，发现这个东西用来做web前端验证确实很不错，所以将例子记录下来，以备后用。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Validator Demo</title>

<link rel="stylesheet" href="css/screen.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
	$(document).ready(
			function() {
				// 手机号码验证   
				jQuery.validator.addMethod("isMobile",
						function(value, element) {
							var length = value.length;
							return this.optional(element)
									|| (length == 11 && /^([1-9]{1}\d{10})$/
											.test(value));
						}, "请正确填写手机号码");

				// 数字验证   
				jQuery.validator.addMethod("isNumber",
						function(value, element) {
							var length = value.length;
							return this.optional(element)
									|| (/^[1-9]?[0-9]$/.test(value));
						}, "请正确填写年龄");

				$("#myForm").validate({
					rules : {
						username : {
							required : true,
							minlength : 6,
							remote : "test"
						},
						password : {
							required : true,
							remote : "test"
						},
						rePassword : {
							required : true,
							equalTo : "#password"
						},
						sex : "required",
						age : {
							required : true,
							isNumber : true
						},
						phone : {
							required : true,
							isMobile : true
						},
						email : {
							required : true
						}
					},
					messages : {
						username : {
							required : "请输入用户名",
							minlength : jQuery.format("用户名长度必须大于{0}."),
							remote : jQuery.format("用户名{0}已存在")
						},
						password : {
							required : "请输入密码",
							remote : "已存在"
						},
						rePassword : {
							required : "请再次输入密码",
							equalTo : "两次密码不一致"
						},
						sex : "请选择性别",
						age : {
							required : "请输入年龄"
						},
						phone : {
							required : "请输入手机号码"
						},
						email : {
							required : "请输入电子邮箱"
						}
					},
					errorPlacement : function(error, element) {
						if (element.is(":radio"))
							error.appendTo(element.next().next());
						else if (element.is(":checkbox"))
							error.appendTo(element.next());
						else
							error.appendTo(element.next());
					},
					submitHandler: function() {
						alert("submitted!");
					},
					success: function(label) {
						label.html(" ").addClass("checked");
					}
				});
			});
</script>

<style type="text/css">
#myForm label.error {
	background: url("images/unchecked.gif") no-repeat 0px 0px;
	padding-left: 16px;
	padding-bottom: 2px;
	font-weight: bold;
	color: #EA5200;
}

#myForm label.checked {
	background: url("images/checked.gif") no-repeat 0px 0px;
}
</style>
</head>
<body>
	<form action="" id="myForm" style="padding: 50px 0 0 50px;">
		<fieldset>
			<legend>请输入以下用户信息</legend>
			<p>
				<label for="username">用户名</label> <input id="username"
					name="username" type="text" /><label />
			</p>
			<p>
				<label for="password">密码</label> <input id="password"
					name="password" type="password" /><label />
			</p>
			<p>
				<label for="rePassword">重复密码</label> <input id="rePassword"
					name="rePassword" type="password" /><label />
			</p>
			<p>
				<label for="sex">性别</label> <input name="sex" type="radio" value="0">女
				<input name="sex" type="radio" value="1">男<label />
			</p>
			<p>
				<label for="age">年龄</label> <input id="age" name="age" type="text" /><label />
			</p>
			<p>
				<label for="phone">手机</label> <input id="phone" name="phone"
					type="text" /><label />
			</p>
			<p>
				<label for="email">电子邮箱</label> <input id="email" name="email"
					type="text" /><label />
			</p>
			<p>
				<input type="submit" value="提交">
			</p>
		</fieldset>
	</form>
</body>
</html>

项目中用到的js/css/images文件如下图