jquery.vilidate的运用

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('失败');

                }

            }

              });

        }

    });