$('#commentForm').validate({ rules: { firstname: { required: true, minlength: 5 }, lastname: "required", username: { required: true, rangelength: [4,6] }, password: { required: true, minlength: 4, number: true }, confirm_password: { required: true, minlength: 3, equalTo: '#password' }, email: { required: true, email: true } }, messages: { firstname: "请输入您的名字", lastname: "请输入您的姓氏", username: { required: "请输入用户名", minlength: "用户名必需由两个字母组成" }, password: { required: "请输入密码", minlength: "密码长度不能小于 5 个字母" }, confirm_password: { required: "请输入密码", minlength: "密码长度不能小于 5 个字母", equalTo: "两次密码输入不一致" }, email: "请输入一个正确的邮箱", } });
效果：
注意：还有一种写验证的方式是在 class 中写，例如
<input type="text">
但是不推荐这种写法，因为不符合样式与结构分离的要求，并且还需要自己下载一个jquery.metadata.js文件才能够这样写
表单提交问题
可以在表单提交之前执行我们自定义的代码，当我们的自定义代码执行完毕后再提交表单
$('#commentForm').validate({ submitHandler: function(){ alert("提交事件成功"); from.submit(); } });
可以设置validate的默认值
$.validate.setDefaults({ submitHandler: function(){ alert("提交成功！"); form.submit(); } });
只验证不提交表单
$(function(){ $("#commentForm").validate({ debug:true; }); });
错误提示信息设置
1、错误信息位置设置
errorPlacement方法是设置错误信息显示在哪，默认值是在验证元素的后面
errorPlacement: function(error, element) { error.appendTo(element.parent()); }
errorClass 是设置错误信息的样式，后跟css类名
errorElement 是设置用什么标签包住错误信息，默认值是<label>
errorLabelContainer 是设置将所有的错误信息包在一个地方
wrapper 是设置用什么标签再把上边的 errorELement 包起来
例如：
errorPlacement: function(error,element){ $(element).closest('form').find('label[for="'+ element.attr("id") +'"]').append(error); },
是将错误提示信息显示在验证的信息前面
效果：
例如：
errorElement: 'span', errorClass: 'commentError', errorLabelContainer: $('form div.error'), wrapper: 'li',
是将每个提示信息用<span>标签包起来，给他们添加css名为 .commentError 的样式， 并把他们都包再一个class为 error 的div里，在用<li>把每个提示信息包起来
效果：
2、错误信息样式设置
有两种方式可以修改提示信息的样式
第一种就是采用下载Validation时自带的样式文件
<link href="https://www.jb51.net/demo/css/screen.css" type="text/css" />
第二种方式就是自己定义样式（当然也可以修改自带的css文件）
例如添加这样的样式：
input.error { border: 1px solid red; } label.error { background:url("demo/images/unchecked.gif") no-repeat 0px 0px; padding-left: 16px; padding-bottom: 2px; font-weight: bold; color: #EA5200; } label.checked { background:url("demo/images/checked.gif") no-repeat 0px 0px; }
效果：
验证时的问题
1、验证的元素通过
验证的元素通过验证时如果要进行操作，可以使用 success ，他可以接受字符串或者是函数，当接受的是字符串的时候是添加样式
例如：
success: function(){ alert(1); },
是在要验证的元素通过验证时，弹出1
例如：
success: "valid"
是将css样式名为 .valid 添加到元素上
2、验证方式
自定义校验