1、引入js库
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
2、自定义校验规则(写入validator-cn.js中,引入)
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
remote: "请修正该字段",
//email: "<span style='color:red;'>请输入正确格式的电子邮件</span>",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为{0} 的值"),
min: jQuery.validator.format("请输入一个最小为{0} 的值")
});
$(function() {
$("#registerForm").validate({
rules : {
userId : "required",
email : {
required : true,
email : true
},
password : {
required : true,
minlength : 5
},
confirm_password : {
required : true,
minlength : 5,
equalTo : "#password"
}
},
messages : {
userId : "<span style='color:red'>职工号不能为空</span>",
email : {
required : "请输入Email地址",
email : "请输入正确的Email地址"
},
password : {
required : "请输入密码",
minlength : jQuery.format("密码不能小于{0}个字 符")
},
confirm_password : {
required : "请输入确认密码",
minlength : "确认密码不能小于5个字符",
equalTo : "两次输入密码不一致啊,重新输一次吧"
}
}
});
});
3、HTML代码
密码<input id="password" name="password" type="password" /> 确认密码<input id="confirm_password" name="confirm_password" type="password" /> 条件验证<input id="funcvalidate" name="funcvalidate" value="" />