1)jquery validate 远程验证remote,自定义验证 , 手机号验证 2)bootstrap validate 远程remote验证的方法.

1)jquery  validate 远程验证remote,自定义验证

1-1: js

 <script src="YYFramework/Public/js/jquery-3.1.1.js"></script>
 <script src="YYFramework/Public/js/jquery.validate.min.js"></script>
 <script src="YYFramework/Public/js/jquery.form.js"></script>
 <script type="text/javascript">

     // 手机号码验证
     $.validator.addMethod("isMobile", function(value, element) {
         var length = value.length;
         var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
         return this.optional(element) || (length == 11 && mobile.test(value));
     }, "请正确填写您的手机号码");

         //jquery.validate表单验证
         $(document).ready(function(){
             //登陆表单验证
             $("#registerForm").validate({
                 rules:{
                     username:{
                         required:true,//必填
                         minlength:3, //最少6个字符
                         maxlength:32,//最多20个字符
                     },
                     password:{
                         required:true,
                         minlength:3,
                         maxlength:32,
                     },
                     confirm_password: {
                            required: true,
                            minlength: 3,
                            maxlength:32,
                            equalTo: "#password"
                     },
                     phone_number: {
                         required: true,
                         isMobile: true,
                         remote:{
                             url:"action.php?c=HLogin&a=phoneNumber",
                             type:"post",
                             data: {
                                 phone_number: function(){return $("#number").val()}
                             }
                         }

                     }
                 },
                 //错误信息提示
                 messages:{
                     username:{
                         required:"必须填写用户名",
                         minlength:"用户名至少为3个字符",
                         maxlength:"用户名至多为32个字符",

                     },
                     password:{
                         required:"必须填写密码",
                         minlength:"密码至少为3个字符",
                         maxlength:"密码至多为32个字符",
                     },
                     confirm_password: {
                             required: "请输入密码",
                             minlength:"密码至少为3个字符",
                             maxlength:"密码至多为32个字符",
                             equalTo: "两次密码输入不一致"
                      },
                      phone_number: {
                          required:"必须填写手机号",
                          isMobile: "手机号格式不正确",
                          remote: "手机号码已经存在"
                      }
                 }, submitHandler:function(form){
                     // form.submit();
                     $(form).ajaxSubmit({
                           dataType:"json",
                           success:function( data ){
                                   console.log('register', data);
                               if( data == -1 ){
                                   alert("注册失败");
                               }else{
                                   alert("注册成功");
                                   setTimeout("window.location.href='homeLogin.php', 1000");
                               }
                             }
                           });

                     return false;
                 }

             });
         });

         </script>

$(form).ajaxSubmit 用的是 jquery.form.js 的方法.

自定义手机号验证:

 6     // 手机号码验证
 7     $.validator.addMethod("isMobile", function(value, element) {
 8         var length = value.length;
 9         var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
10         return this.optional(element) || (length == 11 && mobile.test(value));
11     }, "请正确填写您的手机号码");

1-2: html:

 <div class="register-container">
     <h1>欢迎注册!</h1>

     <div class="connect">
         <p></p>
     </div>

     <form action="action.php?c=HLogin&a=register" method="post" id="registerForm">
         <div>
             <input type="text" name="username" class="username" placeholder="您的用户名" autocomplete="off"/>
         </div>
         <div>
             <input type="password" name="password" class="password" id="password" placeholder="输入密码" oncontextmenu="return false" onpaste="return false" />
         </div>
         <div>
             <input type="password" name="confirm_password" class="confirm_password" placeholder="再次输入密码" oncontextmenu="return false" onpaste="return false" />
         </div>
         <div>
             <input type="text" name="phone_number" class="phone_number" placeholder="输入手机号码" autocomplete="off" id="number"/>
         </div>
         <!-- <div>
             <input type="email" name="email" class="email" placeholder="输入邮箱地址" oncontextmenu="return false" onpaste="return false" />
         </div> -->

         <button id="submit" type="submit">注 册</button>
     </form>
     <a href="homeLogin.php">
         <button type="button" class="register-tis">已经有账号？</button>
     </a>

 </div>

1-3: 服务器端.

1-3-1: 注册:action="action.php?c=HLogin&a=register"

     public function registerAction()
     {
         $userName = $_REQUEST["username"];
         $loginName = $userName;
         $password = $_REQUEST["password"];
         $iphone = $_REQUEST["phone_number"];

         $UserModel = new UserModel();
         $UserModel->userName = $userName;
         $UserModel->loginName = $loginName;
         $UserModel->password = $password;
         $UserModel->pic = '';
         $UserModel->iphone = $iphone;
         $UserModel->lastUpdateTime = time();
         echo json_encode($UserModel->insert());
     }

1-3-2: 远程验证 手机号是否重复.url:"action.php?c=HLogin&a=phoneNumber",

    /**
     * [phoneNumberAction 验证手机号码是否重复]
     * @return [type] [description]
     */
    public function phoneNumberAction()
    {
        $phone = $_REQUEST["phone_number"];

        $UserModel = new UserModel();
        $UserModel->getDataRow( " where iphone = $phone ");

        if ($UserModel->getDB) {
            echo json_encode(false);
        } else {
            echo json_encode(true);
        }

    }

注意 这里返回的是 :  json_encode(false) 表示有重复的号码;   必须是json_encode(true)  ,是json格式.

2)bootstrapvalidate 远程remote验证的方法

2-1:js

         //表单验证
         base.userForm = function(){
             //验证字段
             var fields = {
             'userName':{message :'姓名验证失败!',validators:{notEmpty:{message:'姓名不能为空'}}},
             'loginName':{
                 message :'登录名验证失败!',
                 validators:{
                     notEmpty:{
                         message:'登录名不能为空'
                     },
                     remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                         url: 'action.php?c=HLogin&a=loginName2',//验证地址
                         message: '登录名已存在',//提示消息
                         delay :  1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                         type: 'POST',
                         data: function(validator) {
                               return {
                                   loginName: $('#loginName_0').val()
                               };
                            }

                     }
                 }
             },
             'password':{
                 message :'登陆密码验证失败!',
                 validators:{
                     notEmpty:{
                         message:'登陆密码不能为空'
                     },
                     identical: {
                         field: 'cpassword',
                         message: '确认密码与密码不一致'
                     }

                 }
             },
             'cpassword':{
                 message :'确认密码验证失败!',
                 validators:{
                     notEmpty:{
                         message:'确认密码不能为空'
                     },
                     identical: {
                         field: 'password',
                         message: '确认密码与密码不一致'
                     }

                 }
             },
             'iphone':{
                 message :'手机号验证失败!',
                 validators:{
                     notEmpty:{
                         message:'手机号不能为空'
                     },
                     remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                         url: 'action.php?c=HLogin&a=phoneNumber2',//验证地址
                         message: '手机号已存在',//提示消息
                         delay :  1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                         type: 'POST',
                         data: function(validator) {
                               return {
                                   phone_number: $('#iphone_0').val()
                               };
                            }

                     }
                 }
             }
             };
             //添加验证
             base.validate("#userForm",fields);
         }

2-2: 服务器端: url: 'action.php?c=HLogin&a=phoneNumber2',//  注意返回的数据的格式.

     public function phoneNumber2Action()
     {
         $phone = $_REQUEST["phone_number"];

         $UserModel = new UserModel();
         $UserModel->getDataRow( " where iphone = $phone ");

         if ($UserModel->getDB) {
             // $arr[""]
             // echo json_encode(false);
             echo '{"valid":false}';
         } else {
             // echo json_encode(true);
             echo '{"valid":true}';
         }

     }

必须是这种格式: {"valid":false}