<!doctype html><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><scripttype="text/javascript"src="js/jquery-1.11.1.js"></script><scripttype="text/Javascript"src="js/jquery.validate-1.14.0.js"></script><scripttype="text/javascript">$().ready(function() {varvalidate=$("#signupForm").validate({
rules: {
firstname:"required",
email: {
required:true,
email:true},
passWord: {
required:true,
minlength:5},
confirm_password: {
required:true,
minlength:5,
equalTo:"#password"}
},
messages: {
firstname:"请输入姓名",
email: {
required:"请输入Email地址",
email:"请输入正确的email地址"},
password: {
required:"请输入密码",
minlength:"密码不能小于{0}个字 符"},
confirm_password: {
required:"确认密码",
minlength:"确认密码不能小于5个字符",
equalTo:"两次输入密码不一致不一致"}
},//把错误信息放到一处处理与 errorPlacement 函数连用groups:{
login:"firstname email password confirm_password"},
errorPlacement:function(error,element){
error.insertBefore("#error_info");
},//提交表单后焦点在第一个错误表单内focusInvalid:true,//指定错误提示的CSS类名errorClass:"error_info",//指定验证通过的css类名validClass:"success_info",//验证通过提交表单submitHandler:function(form){
console.info("提交表单"+$(form).serialize());
},
invalidHandler:function(event,validator){
console.info("表单错误"+validate.numberOfInvalids());
},//取消某个元素的校验ignore:"#firstname",
onfocusout:function(){returnfalse;
}
});
$("#check").click(function(){varflag1=$("#signupForm").valid();//检查表单是否有效varflag2=$("#firstname").rules();//查询元素的校验规则varflag3=$("#firstname").rules("add",{minlength:2,maxlength:10});//添加元素的校验规则varflag4=$("#firstname").rules("remove","minlength");//删除元素的校验规则varflag5=validate.form();//验证表单是否有效varflag6=validate.element("#firstname");//验证表单某个元素是否有效validate.resetForm();//恢复表单原来的状态varflag7=validate.numberOfInvalids();//获得错误元素个数console.info(flag7);
});//针对某个元素显示特定的提示信息validate.showErrors({
firstname:"ERROR"});
});</script></head><body><formid="signupForm"method="get"action=""><pid="error_info"><labelfor="firstname">Firstname</label><inputid="firstname"name="firstname"/></p><p><labelfor="email">E-Mail</label><inputid="email"name="email"/></p><p><labelfor="password">Password</label><inputid="password"name="password"type="password"/></p><p><labelfor="confirm_password">确认密码</label><inputid="confirm_password"name="confirm_password"type="password"/></p><p><inputclass="submit"type="submit"value="Submit"/></p><p><inputclass="c"type="button"value="检查表单是否有效"id="check"/></p></form></body></html>