不过，这样感觉不好，因为验证规则侵入了我们的html代码。还有一个方式，便是使用“rules”。我们将input的那些验证用class删除掉。然后修改document的ready事件响应代码：
$(document).ready(function(){ $("#signupForm").validate({ rules:{ firstname:"required", lastname:"required", username:"required", password:"required", confirm_password:{ required:true, equalTo:"#password" }, email:{ required:true, email:true } } }); })
这样以来，也能达到相同的效果。
那么，接下的问题，就是显示的错误提示是默认的。我们需要使用自定义的提示：
$(document).ready(function(){ $("#signupForm").validate({ rules:{ firstname:"required", lastname:"required", username:"required", password:"required", confirm_password:{ required:true, equalTo:"#password" }, email:{ required:true, email:true } }, messages:{ firstname:"必填项", lastname:"必填项", username:"必填项", password:"必填项", confirm_password:{ required:"必填项", equalTo:"密码不一致" }, email:{ required:"必填项", email:"格式有误" } } }); })
如果你还想在错误信息上显示特别的样式(比如字体为红色)即可通过添加：
<style type="text/css"> #signupForm label.error { padding-left: 16px; margin-left: 2px; color:red; background: url(img/unchecked.gif) no-repeat 0px 0px; } </style>
继续添加对输入密码长度的验证规则：
$(document).ready(function(){ $("#signupForm").validate({ rules:{ firstname:"required", lastname:"required", username:"required", password:{ required:true, minlength:4, maxlength:15 }, confirm_password:{ required:true, equalTo:"#password" }, email:{ required:true, email:true } }, messages:{ firstname:"必填项", lastname:"必填项", username:"必填项", password:{ required:"必填项", minlength:jQuery.format("密码长度不少于{0}位"), maxlength:jQuery.format("密码长度不超过{0}位") }, confirm_password:{ required:"必填项", equalTo:"密码不一致" }, email:{ required:"必填项", email:"格式有误" } } }); })
使用remote
可以通过event指定触发效验方式（可选值有keyup(每次按键时)，blur(当控件失去焦点时)，不指定时就只在按提交按钮时触发）
$(document).ready(function(){ $("#signupForm").validate({ event:"keyup" || "blur" }) })
如果通过指定debug为true则表单不会提交只能用来验证(默认为提交)，可用来调试
$(document).ready(function(){ $("#signupForm").validate({ debug:true }) })
如果在提交前还需要进行一些自定义处理使用submitHandler参数
$(document).ready(function(){ $("#signupForm").validate({ SubmitHandler:function(){ alert("success"); } }) })
您可能感兴趣的文章: