引入库：
<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>
表单：
1 <form action="" method='post' name='regis'>
5 <p>
6 <label for="account">登录账号：</label>
7 <input type="text" name='account' id="account" autocomplete="off" />
8 </p>
9 <p>
10 <label for="pwd">登录密码：</label>
11 <input type="password" name='pwd' id="pwd"/>
12 </p>
13 <p>
14 <label for="pwd">确认密码：</label>
15 <input type="password" name='pwded'/>
16 </p>
17 <p>
18 <label for="uname">昵 称：</label>
19 <input type="text" name='uname' id="uname" />
20 </p>
21 <p>
22 <label for="verify">验证码：</label>
23 <input type="text" name="verify" id="verify" />
24 <img src="#" alt="验证码图片" class="verify" id="verify-img" title="点击更换" />
25 </p>
26 <p>
27 <input type="submit" value='立即注册' id='regis'/>
28 </p>
29 </form>
register.js文件：
1 $(function () {
2
3 //jQuery Validate表单验证
4
5 /**
6 * 添加验证方法: ok
7 * 以字母开头，5-17 位字母、数字、下划线"_"
8 */
9 jQuery.validator.addMethod("ok", function(value, element) {
10 var account = /^[a-zA-Z][\w]{4,16}$/;
11 return this.optional(element) || (account.test(value));
12 }, '以字母开头，5-17 位字母、数字、下划线"_"');
13
14 $('form[name="regis"]').validate({
15
16 // 验证规则
17 rules:{
18 account:{ //form表单中input[name='account']元素的验证规则
19 required: true, //必须字段，不能为空
20 ok: true, //启用自定义验证规则'ok'
21 remote: { //异步验证
22 url: checkAccountUrl, //后台处理程序
23 type: "post", //数据发送方式
24 dataType: "json", //接受数据格式
25 data: { //要传递的数据
26 account: function() {
27 return $("#account").val().trim();
28 }
29 }
30 }
31 },
32 pwd:{
33 required: true,
34 ok: true,
35 },
36 pwded:{
37 required: true,
38 equalTo: '#pwd'
39 },
40 uname:{
41 required: true,
42 rangelength: [2, 10],
43 remote: {
44 url: checkUnameUrl,
45 type: "post",
46 dataType: "json",
47 data: {
48 uname: function () {
49 return $("#uname").val().trim();
50 }
51 }
52 }
53 },
54 verify:{
55 required: true,
56 remote: {
57 url: checkVerifyUrl,
58 type: 'post',
59 dataType: 'json',
60 data: {
61 verify: function () {
62 return $('#verify').val().trim();
63 }
64 }
65 }
66 }
67 },
68
69 // 提示消息
70 messages:{
71 account:{ //form表单中input[name='account']元素的提示信息
72 required: '账号不能为空', // 输入为空时提示
73 remote: '账号已存在' // 异步获得json数据为'false'时提示，也就是后台验证失败
74 },
75 pwd:{
76 required: '密码不能为空',
77 },
78 pwded:{
79 required: '请确认密码',
80 equalTo: '两次密码不一致'
81 },
82 uname:{
83 required: '请填写您的昵称',
84 rangelength: '昵称必须在{0}-{1}个字之间',
85 remote: '昵称已存在'
86 },
87 verify:{
88 required: '请输入验证码',
89 remote: '验证码有误'
90 }
91 },
92
93 // 错误标签元素
94 errorElement: 'span',
95
96 // 错误提示位置
97 errorPlacement: function (error, element) { // error是错误信息的提示元素，element是当前input域
98 error.appendTo(element.parent()).prev('.success').remove(); //追加提示元素，去掉之前的成功元素
99 },
100
101 // 验证通过
102 success: function (span) { // span 是错误的提示元素
103 span.removeClass('error').addClass('success').siblings('.success').remove(); //追加成功样式，去掉错误样式和重复的成功样式
104 }
105 });
106
107 })
errorElement 的CSS样式：
1 input.error{ /*...*/ } /* 输入框 的错误样式 */
2 input.valid{ /*...*/ } /* 输入框 的成功样式 */
3 span.error{ /*...*/ } /* 提示元素的错误样式 */4 span.success{ /*...*/ } /* 提示元素的成功样式 */
转自：http://www.cnblogs.com/linjiqin/p/3431835.html