validate jquery 注册页面使用实例 详解

官方使用文档：http://jqueryvalidation.org/documentation/

参考资料：http://www.w3cschool.cc/jquery/jquery-plugin-validate.html

导入JS 文件 记得都使用压缩过的.min的js  依赖jquery 版本在1.11.1下没问题  其他版本没有测试

  <script type="text/javascript" src="/js/jquery-1.11.1.js"></script>
  <script type="text/javascript" src="/js/jquery.validate.js"></script>

　

HTML结构  使用 thinkphp框架做的

  <div class="w100 register-bg">
            <div class="w1200 center register-block">

                <div class="register-div" >
                    <form action="{:U('Service/reg/index')}"  method="post" class="reg-form" id="register" >
                        <fieldset style="border: 0px;">
                            <legend class="ui header">用户注册
                                <a href="{:U('Login/index')}" target="_self"> 已有账号登陆</a>
                            </legend>

                            <p class="field">
                                <label>用户名：</label>

                                <input ID="name" name="name" type="text" placeholder="用户名" class="user-name">
                                <span></span>

                            </p>

                            <p class="field">
                                <label>密码：</label>

                                <input id="pw" name="pw" type="password" placeholder="密码" class="user-pw">

                            </p>

                            <p class="field">
                                <label>重复密码：</label>

                                <input id="againpw" name="againpw" type="password" placeholder="重复密码" class="user-re-pw">

                            </p>

                            <p class="field">
                                <label>邮箱：</label>

                                <input id="emali" name="email" type="text" placeholder="邮箱" class="user-email">

                            </p>
                            <p class="checkbox">
                                <input type="checkbox" name="read" value="1" class="user-read">

                                <label  for="read" placeholder="用户协议选择">
                                    我已阅读同意星耀学园
                                    <a href="" target="_blank">《用户协议》</a>
                                </label>
                            </p>
                            <p class="field">
                                <button type="submit" class="register-button ">注册</button>
                            </p>
                        </fieldset>
                    </form>

                </div>

            </div>

        </div>

使用方法 ：

最基本的就是 表单ID 执行validate函数验证

 <script type="text/javascript">

                $(document).ready(function(){

                    $("#register").validate({

                    });
                })

            </script>

remote使用实例

官方介绍 http://jqueryvalidation.org/remote-method/

注意的就是remote写在验证字段的里面 rules 的字段 比如name下 name字段 在HTML 的属性ID 和name属性值 都是这个

messages的字段name里 加remote 后面直接提示文字

后端返回的是字符串true 或者fales 看JS源码貌似比较的就是true

  $(document).ready(function(){

                    $("#register").validate({

                       /* debug:true,*/
                        errorClass:'x-error',
                        errorElement:'div',
                        /*错误信息显示位置*/
                        errorPlacement:function(error,element){
                            error.appendTo(element.parent().find('label'))
                        },
                        rules:{
                            name:{
                                required:true,
                                minlength:4 ,
                                rangelength:[4,10],
                                remote:{
                                    url:'{:U("Service/Validata/checkUsername")}',
                                    type:'post',
                                    data:{
                                        name:function(){
                                            return $('#name').val();
                                        }
                                    }
                            }
                            },
                            pw:{
                                required:true,
                                minlength:8,
                                rangelength:[8,16]
                            },
                            againpw:{
                                required:true,
                                minlength:8,
                                rangelength:[8,16],
                                equalTo:"#againpw"

                            },
                            email:{
                                required:true,
                                email:true,
                                remote:{
                                    url:'{:U("Service/Validata/checkEmail")}',
                                    type:'post',
                                    data:{
                                        email:function(){
                                            return $('#email').val();
                                        }
                                    }
                                }
                            },
                            agreement:{
                                required:true
                            }

                        },
                        messages:{
                            name:{
                                required:"请输入用户名",
                                minlength:"用户名最少为4个字符",
                                rangelength:"用户名为4-10个字符",
                                remote:"用户名已被注册"
                            },
                            pw:{
                                required:"请输入密码",
                                minlength:"密码最少8位",
                                rangelength:"请输入8位到16位的密码"
                            },
                            againpw:{
                                required:"请输入确认密码",
                                minlength:"确认密码最少8位",
                                rangelength:"请输入8位到16位密码",
                                equalTo:"两次输入密码不一致"

                            },
                            email:{
                                required:"请输入email",
                                email:"请输入一个有效的email地址",
                                remote:"邮箱已被注册！"
                            },
                            agreement:{
                                required:"不同意星耀学园协议不能注册！"
                            }

                        }

                    });
                })

　验证规则

 rules:{
                            name:{
                                required:true,
                                minlength:4 ,
                                rangelength:[4,10],
                                remote:{
                                    url:'{:U("Service/Validata/checkUsername")}',
                                    type:'post',
                                    data:{
                                        name:function(){
                                            return $('#name').val();
                                        }
                                    }
                            }
                            }
}

　　提示文字

 messages:{
                            name:{
                                required:"请输入用户名",
                                minlength:"用户名最少为4个字符",
                                rangelength:"用户名为4-10个字符",
                                remote:"用户名已被注册"
                            }
}

　后台php  thinkphp框架 这里接受的参数是前端remote data里的参数

public function checkUsername(){

    $name = I('name',0);//这里name是JS remote发送的data参数
   if($name == "0"){

       echo "false";

   }else{

       $Member = M('admin_member');
       $s = $Member->where(array(admin_name=>$name))->select();

       echo $s == null ?"true":"false" ;
   }

}

public function checkEmail(){

    $email = I('email',0);
    if($email == "0"){

        echo "false";

    }else{

        $Member = M('admin_member');
        $s = $Member->where(array(email=>$email))->select();

        echo $s == null ?"true":"false" ;
    }

}

　想看到前台返回什么可以在源码jquery.validate.js里查找remote　在$.ajax 里success 的返回参数response 输出这个值 就能在浏览器里看到了

　

错误信息设置

errorClass 提示错误的类名 errorElement 提示错误信息的元素 自动添加 后面errorPlacement就是要把错误信息放在哪个位置上

                        errorClass:'x-error',
                        errorElement:'div',
                        /*错误信息显示位置*/
                        errorPlacement:function(error,element){
                            error.appendTo(element.parent().find('label'))
                        },

下面是字段验证规则

比如name字段

一般常用的就是必须填写 最少4位（举例） 输入4-10个字符串（举例）

required:true 必须填写  minlength:4 最少输入4个字符  rangelength:[4,10]输入4-10个范围的字符 这些都是写在rules里

 name:{
                                required:true,
                                minlength:4 ,
                                rangelength:[4,10],
                                remote:{
                                    url:'{:U("Service/Validata/checkUsername")}',
                                    type:'post',
                                    data:{
                                        name:function(){
                                            return $('#name').val();
                                        }
                                    }
                            }
                            },

提示文字 写在messages 对应验证属性required  minlength  rangelength remote 填写对应提示信息即可

                         name:{
                                required:"请输入用户名",
                                minlength:"用户名最少为4个字符",
                                rangelength:"用户名为4-10个字符",
                                remote:"用户名已被注册"
                            },

查看验证方法 直接去源码里搜索methods

　

验证checkbox必须选中

HTML

                         <p class="checkbox">

                                <input type="checkbox" name="agreement" value="1" class="user-read" id="agreement">
                                <label  for="agreement" placeholder="用户协议选择">

                                      我已阅读同意星耀学园
                                      <a href="" target="_blank">《用户协议》</a>

                                </label>
                            </p>

验证规则

  agreement:{
                                required:true
                            }

　　

　　

　

其他参考网址

http://www.w3cschool.cc/jquery/jquery-plugin-validate.html