1 <form id="registerform" method="get">
 2     <table>
 3         <tbody>
 4         <tr>
 5             <td class="w140"><i class="mark orange">*</i>邮箱:</td>
 6             <td class="w348"><input type="email" name="username" placeholder="请输入邮箱账号进行注册"/></td>
 7         </tr>
 8         <tr height="8px">
 9             <td></td>
10             <td></td>
11         </tr>
12         <tr>
13             <td class="w140"><i class="mark orange">*</i>设置密码:</td>
14             <td><input type="password" name="password" placeholder="请输入账不少于8位的账号密码" id="field"/><i class="icon icon_nosee passwordsee"></i></td>
15         </tr>
16         <tr height="8px">
17             <td></td>
18             <td></td>
19         </tr>
20         <tr>
21             <td class="w140"><i class="mark orange">*</i>确认密码:</td>
22             <td><input type="password" name="rpassword" placeholder="请再次输入密码"/><i class="icon icon_nosee passwordsee"></i></td>
23         </tr>
24         <tr height="8px">
25             <td></td>
26             <td></td>
27         </tr>
28         <tr>
29             <td class="w140">手机号码:</td>
30             <td><input type="text" name="telephone" placeholder="请输入可以联系的手机号码" class="ignore"/></td>
31         </tr>
32         <tr>
33             <td class="w140"></td>
34             <td class="signup"><a href="javascript:;">已有账号登入</a></td>
35         </tr>
36         <tr>
37             <td></td>
38             <td>
39                 <div class="agreement">
40                     <p><input type="checkbox" name="agreement" checked="checked" /><a href="javascript:;">我已阅读并同意《淘淘乐用户服务协议》</a></p>
41                     <p><input type="submit" class="btnsubmit" value="注册登入"/></p>
42                 </div>
43             </td>
44         </tr>
45 
46         </tbody>
47     </table>
48 
49 </form>
 1 $("#registerform").validate({
 2         //debug:true ,
 3         //如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便
 4         rules:{
 5             username:{required:true,
 6                 email:true,
 7                 remote:{//远程地址只能输出 "true" 或 "false",不能有其它输出,这个地方很多介绍有歧义,真正的用法是在此处
 8                     url:"check_username.php",
 9                     type:"post",//传值方式
10                     dataType: "json",//接受数据格式
11                     data:{
12                         //要传过的值  返回true时表示通过验证,false反
13                         username: function() {
14                             return $("#username").val();
15                         }
16                     }
17 
18                 }
19             },
20             password:{required:true,minlength:8},
21             rpassword:{required:true,equalTo:"#field"},
22             agreement:{required:true}
23         },
24         messages:{
25             username:{required:"请输入用户名",email:"请输入正确的邮箱格式",remote:"用户名已存在"},
26             password:{required :'请输入密码',minlength:"请输入不少于8位的密码"},
27             rpassword:{required:'请确认密码',equalTo:"输入号码不一致"},
28             agreement:{required:'请先选择协议'}
29 
30         },
31         errorElement:"p",//用来创建错误提示信息标签(可自定义)
32         onkeyup: false,//键盘抬起不验证(不然输一个字符验证一下很烦),保证了输入之后失去焦点之后才会验证
33         ignore: ".ignore",
34         focusCleanup:'true',//输入框聚焦的时候会把所有显示的消息给清除掉
35         validClass:"success",
//这个地方巨坑,没指定之前如果信息错误之后,再改正确,错误信息一直不消失(错误的class正确的class都存在),会把正确信息的样式给覆盖掉,怎么弄都不行,后来发现指定这个之后,如果填写正确,会把错误信息的class给干掉
36 errorPlacement:function(error, element){//处理错误信息位置,在下面的复选框用到 37 //console.log(error); 38 //console.log(element); 39 if(element.is(":radio")||element.is(":checkbox")){ 40 error.appendTo(element.parent()); 41 }else{ 42 console.log('yjj'); 43 error.insertAfter(element); 44 } 45 46 }, 47 success : function(label,element){ 48 //console.log(1); 49 //console.log(label); 50 //console.log(arguments); 51 if($(element).is(":checkbox")){ 52 $(label).remove(); 53 }else{ 54 //验证成功后执行的回调函数,label指向上面那个错误提 示信息标签em 55 label.text( ' ' ).addClass("success") //添加上自定义的success类 56 } 57 58 }, 59 submitHandler: function(form) //ajax 验证 60 { 61 alert(1); 62 //$(form).ajaxSubmit(); 63 $.ajax({ 64 url:'check.php', 65 type:'post', 66 dataType:'json', 67 data:$('#registerform').serialize(), 68 success:function(data){ 69 $.each(data,function(i,v){ 70 if(v.msg == false){ 71 alert("类型已存在!"); 72 }else{ 73 showTypeList(v.typeData); 74 } 75 76 }); 77 }, 78 error:function(){ 79 alert('信息错误') 80 } 81 }); 82 return false;//阻止表单提交 83 }, 84 invalidHandler: function(form, validator) { //不通过回调 85 return false; 86 } 87 });

 jquery.validation.js. 使用当中遇到的坑确实不少,查找一系列英文官网,才做出完整效果。以后如果又好用的在介绍补充吧