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. 使用当中遇到的坑确实不少，查找一系列英文官网，才做出完整效果。以后如果又好用的在介绍补充吧
