jquery.validation.js 表单验证 完整例子使用

Posted 2020-07-01

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