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