1.页面信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="additional-methods.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
isUserName:true
},
password: {
required: true,
isPwd:true
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
agree: "required",
no:{
required: true,
isZipCode: true
}
},
messages: {
firstname: "请输入您的名字",
lastname: "请输入您的姓氏",
username: {
required: "请输入用户名",
isUserName: "用户名格式不对"
},
password: {
required: "请输入密码",
isPwd: "密码格式不对"
},
confirm_password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母",
equalTo: "两次密码输入不一致"
},
email: "请输入一个正确的邮箱",
agree: "请接受我们的声明",
no:{
required: "请输入邮政编码",
isZipCode: "格式不对"
}
}
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>验证完整的表单</legend>
<p>
<label for="firstname">名字</label>
<input id="firstname" name="firstname" type="text">
</p>
<p>
<label for="lastname">姓氏</label>
<input id="lastname" name="lastname" type="text">
</p>
<p>
<label for="username">用户名</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password">密码</label>
<input id="password" name="password" type="password">
</p>
<p>
<label for="no">邮政编码</label>
<input id="no" name="no" type="text">
</p>
<p>
<label for="confirm_password">验证密码</label>
<input id="confirm_password" name="confirm_password" type="password">
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email">
</p>
<p>
<label for="agree">请同意我们的声明</label>
<input type="checkbox" class="checkbox" id="agree" name="agree">
</p>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
2.添加自定义校验(additional-methods.js)
(1)写在 additional-methods.js 文件中,自行创建。
(2)调用前要添加对 additional-methods.js 文件的引用。
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
//验证用户名是否由3-10位的字母、数字和下划线组成。
jQuery.validator.addMethod("isUserName", function(value, element) {
var tel = /^(\w){3,10}$/;
return this.optional(element) || (tel.test(value));
}, "用户名格式不正确");
// 验证密码:
// 1、密码必须由数字、字符、特殊字符三种中的两种组成;
// 2、密码长度不能少于8个字符,最多20;
// (?!^\\d+$)不能全是数字
// (?!^[a-zA-Z]+$)不能全是字母
// (?!^[a-zA-Z\d-`=\\\[\];',./~!@#$%^&*()_+|{}:"<>?]+$)不能全是符号(这里只列出了部分符号,可自己增加,有的符号可能需要转义)
// {8,20}长度不能少于8位,最大不能高于20位
jQuery.validator.addMethod("isPwd", function(value, element) {
var tel = /^(?![a-zA-z]+$)(?!\d+$)(?![-`=\\\[\];',./~!@#$%^&*()_+|{}:"<>?]+$)[a-zA-Z\d-`=\\\[\];',./~!@#$%^&*()_+|{}:"<>?]{8,20}$/;
return this.optional(element) || (tel.test(value));
}, "密码格式不正确");