官网地址：http://bassistance.de/jquery-plugins/jquery-plugin-validation
Validate手册： http://www.cnblogs.com/chutianshu1981/p/3602184.html
效果图：
引入库：
<script type="text/javascript" src="__PUBLIC__/Js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/jquery-validate.js"></script>
<script type="text/javascript" src="__PUBLIC__/Js/register.js"></script>
表单：
<form action="" method='post' name='regis'>
<p>
<label for="account">登录账号：</label>
<input type="text" name='account' id="account" autocomplete="off" />
</p>
<p>
<label for="pwd">登录密码：</label>
<input type="password" name='pwd' id="pwd"/>
</p>
<p>
<label for="pwded">确认密码：</label>
<input type="password" name='pwded' id='pwded'/>
</p>
<p>
<label for="uname">昵 称：</label>
<input type="text" name='uname' id="uname" />
</p>
<p>
<label for="verify">验证码：</label>
<input type="text" name="verify" id="verify" />
<img src="#" alt="验证码图片" class="verify" id="verify-img" title="点击更换" />
</p>
<p>
<input type="submit" value='立即注册' id='regis'/>
</p>
</form>
register.js文件：
$(function () {
//jQuery Validate表单验证
/**
* 添加验证方法: ok
* 以字母开头，5-17 位字母、数字、下划线"_"
*/
jQuery.validator.addMethod("ok", function(value, element) {
var account = /^[a-zA-Z][w]{4,16}$/;
return this.optional(element) || (account.test(value));
}, '以字母开头，5-17 位字母、数字、下划线"_"');
$('form[name="regis"]').validate({
// 验证规则
rules:{
account:{ //form表单中input[name='account']元素的验证规则
required: true, //必须字段，不能为空
ok: true, //启用自定义验证规则'ok'
remote: { //异步验证
url: checkAccountUrl, //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
account: function() {
return $("#account").val().trim();
}
}
}
},
pwd:{
required: true,
ok: true,
},
pwded:{
required: true,
equalTo: '#pwd'
},
uname:{
required: true,
rangelength: [2, 10],
remote: {
url: checkUnameUrl,
type: "post",
dataType: "json",
data: {
uname: function () {
return $("#uname").val().trim();
}
}
}
},
verify:{
required: true,
remote: {
url: checkVerifyUrl,
type: 'post',
dataType: 'json',
data: {
verify: function () {
return $('#verify').val().trim();
}
}
}
}
},
// 提示消息
messages:{
account:{ //form表单中input[name='account']元素的提示信息
required: '账号不能为空', // 输入为空时提示
remote: '账号已存在' // 异步获得json数据为'false'时提示，也就是后台验证失败
},
pwd:{
required: '密码不能为空',
},
pwded:{
required: '请确认密码',
equalTo: '两次密码不一致'
},
uname:{
required: '请填写您的昵称',
rangelength: '昵称必须在{0}-{1}个字之间',
remote: '昵称已存在'
},
verify:{
required: '请输入验证码',
remote: '验证码有误'
}
},
// 错误标签元素
errorElement: 'span',
// 错误提示位置
errorPlacement: function (error, element) { // error是错误信息的提示元素，element是当前input域
error.appendTo(element.parent()).prev('.success').remove(); //追加提示元素，去掉之前的成功元素
},
// 验证通过
success: function (span) { // span 是错误的提示元素
span.removeClass('error').addClass('success').siblings('.success').remove(); //追加成功样式，去掉错误样式和重复的成功样式
}
});
})
errorElement 的CSS样式：
input.error{ /*...*/ } /* 输入框 的错误样式 */
input.valid{ /*...*/ } /* 输入框 的成功样式 */
span.error{ /*...*/ } /* 提示元素的错误样式 */
span.success{ /*...*/ } /* 提示元素的成功样式 */