需要JQuery版本：1.2.6+, 兼容 1.3.2
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
//开始验证
$(‘#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>