jquery.vilidate的运用

vilidate是jquery的一个form表单验证插件非常实用

里面需要注意的就是remote的用法

/*验证*/
$().ready(function() {
    $(".form_all").validate({
        
        /*经验证，都未出错则执行*/
        submitHandler: function(form) {
  
        },
        /*提示信息位置为下面的空div*/
        errorPlacement: function(error, element) { //错误信息位置设置方法
            error.appendTo( element.parent().next() ); //这里的element是录入数据的对象
        },
        onkeyup: false,

        /*验证规则*/
        rules:{
            /*验证码*/
            validata_number:{
                required:true,
                number:true,
                rangelength:[6,6],
                remote   : {
                    url :'?c=register&m=verification_judge',
                    type:'post',
                    data:{
                        send_code : function(){
                           return $("#validata_number").val();
                        },
                        send_code_name : function(){
                           return $('form').find('.input_name').val();
                        },

                    }
                }
            },
            /*账户邮箱手机号*/
//            uername:{
//                required:true,
//                uername:true
//            },

            /*玩家账号*/
            Player_account:{
                required:true,
                remote:{
                    url :'?c=register&m=name_judge',
                    type:'post',
                    data:{
                        name : function(){
                           return $("#Player_account").val();
                        },
                        player_account:function(){
                           return $("#Player_account").attr('name');
                        }

                    }
                }
            },
           /* /!*真实姓名*!/
            real_name:{
                required:true
            },
            /!*身份证号码*!/
            ID_number:{
                IDnumber:true
            },*/
            /*手机号码*/
            phone_number:{
                required:true,
                number:true,
                rangelength:[11,11],
                phonenumber:true,
                remote: {
                    url :'?c=register&m=name_judge',
                    type:'post',
                    data:{
                        name : function(){
                           return $("#phone_number").val();
                        }

                    }
                }

            },
            /*旧密码*/
            old_password:{
                required:true,
                rangelength:[6,15],
                remote:{
                    url:'?c=register&m=name_judge',
                    type:'post',
                    data:{
                        name:function(){
                            return $("#uername_email_phone").val();
                        },
                        old_password:function(){
                            return $("#old_password").val();
                        }
                    }
                }
            },
            /*密码*/
            password:{
                required:true,
                rangelength:[6,15]
            },
            /*确认密码*/
            Confirm_password:{
                required:true,
                rangelength:[6,15],
                equalTo: ".password"    
            },
            /*邮箱*/
            email: {
                required: true,
                email: true,
                remote:{
                    url:'?c=register&m=name_judge',
                    type:'post',
                    data:{
                        name:function(){
                            return $("#email").val();
                        }
                    }
                }
            },
            /*找回密码 邮箱*/
            email_back: {
                required: true,
                email:true,
                remote:{
                    url:'?c=register&m=name_judge',
                    type:'post',
                    data:{
                        name:function(){
                            return $("#email_back").val();
                        }
                    }
                }
            },
            /*找回密码 手机*/
            phone_back:{
                required:true,
                number:true,
                rangelength:[11,11],
                phonenumber:true,
                remote:{
                    url:'?c=register&m=name_judge',
                    type:'post',
                    data:{
                        name:function(){
                            return $("#phone_back").val();
                        }
                    }
                }
                
            },
            /*修改密码*/
            uername_email_phone:{
                required:true,
                remote:{
                    url:'?c=register&m=name_judge',
                    type:'post',
                    data:{
                        name:function(){
                            return $("#uername_email_phone").val();
                        }
                    }
                }
            }
            
            
        },
        /*验证失败提示*/
        messages:{
            validata_number:{
                required:"请输入右侧验证码",
                number:"请输入数字",
                rangelength:"请输入六位验证码",
                remote:"验证码错误"    
            },
            uername:{
                required:"请输入用户名",
                uername:"该用户不存在,请重新输入"
            },
            /*real_name:{
                required:"请输入您的真实姓名"
            },*/
            Player_account:{
                required:"请输入您的账号",
                remote:"账号输入不对,请重新输入"
            },
           /* ID_number:{
                IDnumber:"请输入正确的身份证号码"
            },*/
            phone_number:{
                required:"请输入手机号码",
                number:"请输入正确的手机号码",
                rangelength:"请输入十一位手机号码",
                phonenumber:"请输入正确的手机号码",
                remote:"此号码已被注册"
                
            },
            old_password:{
                required: "请输入密码",
                minlength: "密码长度在6到15之间"
            },
            password:{
                required: "请输入密码",
                minlength: "密码长度在6到15之间"
            },
            Confirm_password:{
                required: "请输入密码",
                minlength: "密码长度在6到15之间",
                equalTo: "两次密码输入不一致"
            },
            email:{
                required: "请输入邮箱",
                email:"请输入一个正确的邮箱",
                remote:"此邮箱已经被注册"
            },
            email_back:{
                required: "请输入邮箱账号",
                email:"请输入一个正确的邮箱",
                remote:"用户名错误,请重新输入"
            },
            phone_back:{
                required:"请输入手机号码",
                number:"请输入正确的手机号码",
                rangelength:"请输入十一位手机号码",
                phonenumber:"请输入正确的手机号码",
                remote:"用户名错误,请重新输入"
            },
            uername_email_phone:{
                required:"请输入正确的用户名/邮箱/手机号码",
                remote:"输入账号不存在,请重新输入"
            },
            old_password:{
                required: "请输入密码",
                minlength: "密码长度在6到15之间",
                remote:"密码输入错误,请重新输入"
            }
            
        },
          
    });

1.需注意用remote的一个容易发生错误的地方 在发送ajax的时候格式为json jquery remote认证的是字符串  需要触发的时候返回echo "false";return false;  无需触发 返回echo "true";return false;

2.使用了remote之后 submitHandler: function(form) {   } 与 remote会相触  解决方法

function doSubmit()
    {    
        var result =$("form").valid();   //判断input是否符合要求
        
        if(result == true){

            return true;
        }else{

            return false;
        }
    }
    
    $('#submit').click(function(){
        var url = $('form').attr('action');
        if(doSubmit()){
         var data= $('form :input').serialize();
         $.ajax({
            url:url,
            type:'post',
            data:data,
            dataType:'json',
            success:function(data) {
                if (data)
                {
                    alert('成功');
                } else
                {
                    alert('失败');
                }
            }
              });
        }
    });

在工作中遇到的一些情况,如果有更好的麻烦也告诉我!