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

1-1: js

 1 <script src="YYFramework/Public/js/jquery-3.1.1.js"></script>
 2 <script src="YYFramework/Public/js/jquery.validate.min.js"></script>
 3 <script src="YYFramework/Public/js/jquery.form.js"></script>
 4 <script type="text/javascript">
 5 
 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     }, "请正确填写您的手机号码");
12 
13         //jquery.validate表单验证
14         $(document).ready(function(){
15             //登陆表单验证
16             $("#registerForm").validate({
17                 rules:{
18                     username:{
19                         required:true,//必填
20                         minlength:3, //最少6个字符
21                         maxlength:32,//最多20个字符
22                     },
23                     password:{
24                         required:true,
25                         minlength:3,
26                         maxlength:32,
27                     },
28                     confirm_password: {
29                            required: true,
30                            minlength: 3,
31                            maxlength:32,
32                            equalTo: "#password"
33                     },
34                     phone_number: {
35                         required: true,
36                         isMobile: true,
37                         remote:{
38                             url:"action.php?c=HLogin&a=phoneNumber",
39                             type:"post",
40                             data: {
41                                 phone_number: function(){return $("#number").val()}
42                             }
43                         }
44 
45                     }
46                 },
47                 //错误信息提示
48                 messages:{
49                     username:{
50                         required:"必须填写用户名",
51                         minlength:"用户名至少为3个字符",
52                         maxlength:"用户名至多为32个字符",
53 
54                     },
55                     password:{
56                         required:"必须填写密码",
57                         minlength:"密码至少为3个字符",
58                         maxlength:"密码至多为32个字符",
59                     },
60                     confirm_password: {
61                             required: "请输入密码",
62                             minlength:"密码至少为3个字符",
63                             maxlength:"密码至多为32个字符",
64                             equalTo: "两次密码输入不一致"
65                      },
66                      phone_number: {
67                          required:"必须填写手机号",
68                          isMobile: "手机号格式不正确",
69                          remote: "手机号码已经存在"
70                      }
71                 }, submitHandler:function(form){
72                     // form.submit();
73                     $(form).ajaxSubmit({
74                           dataType:"json",
75                           success:function( data ){
76                                   console.log('register', data);
77                               if( data == -1 ){
78                                   alert("注册失败");
79                               }else{
80                                   alert("注册成功");
81                                   setTimeout("window.location.href='homeLogin.php', 1000");
82                               }
83                             }
84                           });
85 
86                     return false;
87                 }
88 
89             });
90         });
91 
92         </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:

 1 <div class="register-container">
 2     <h1>欢迎注册!</h1>
 3 
 4     <div class="connect">
 5         <p></p>
 6     </div>
 7 
 8     <form action="action.php?c=HLogin&a=register" method="post" >
 9         <div>
10             <input type="text" name="username" class="username" placeholder="您的用户名" autocomplete="off"/>
11         </div>
12         <div>
13             <input type="password" name="password" class="password"  />
14         </div>
15         <div>
16             <input type="password" name="confirm_password" class="confirm_password" placeholder="再次输入密码" oncontextmenu="return false" onpaste="return false" />
17         </div>
18         <div>
19             <input type="text" name="phone_number" class="phone_number" placeholder="输入手机号码" autocomplete="off" />
20         </div>
21         <!-- <div>
22             <input type="email" name="email" class="email" placeholder="输入邮箱地址" oncontextmenu="return false" onpaste="return false" />
23         </div> -->
24 
25         <button >注 册</button>
26     </form>
27     <a href="homeLogin.php">
28         <button type="button" class="register-tis">已经有账号？</button>
29     </a>
30 
31 </div>

1-3: 服务器端.

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

 1     public function registerAction()
 2     {
 3         $userName = $_REQUEST["username"];
 4         $loginName = $userName;
 5         $password = $_REQUEST["password"];
 6         $iphone = $_REQUEST["phone_number"];
 7 
 8         $UserModel = new UserModel();
 9         $UserModel->userName = $userName;
10         $UserModel->loginName = $loginName;
11         $UserModel->password = $password;
12         $UserModel->pic = '';
13         $UserModel->iphone = $iphone;
14         $UserModel->lastUpdateTime = time();
15         echo json_encode($UserModel->insert());
16     }

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

 1         //表单验证
 2         base.userForm = function(){
 3             //验证字段
 4             var fields = {
 5             'userName':{message :'姓名验证失败!',validators:{notEmpty:{message:'姓名不能为空'}}},
 6             'loginName':{
 7                 message :'登录名验证失败!',
 8                 validators:{
 9                     notEmpty:{
10                         message:'登录名不能为空'
11                     },
12                     remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
13                         url: 'action.php?c=HLogin&a=loginName2',//验证地址
14                         message: '登录名已存在',//提示消息
15                         delay :  1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
16                         type: 'POST',
17                         data: function(validator) {
18                               return {
19                                   loginName: $('#loginName_0').val()
20                               };
21                            }
22 
23                     }
24                 }
25             },
26             'password':{
27                 message :'登陆密码验证失败!',
28                 validators:{
29                     notEmpty:{
30                         message:'登陆密码不能为空'
31                     },
32                     identical: {
33                         field: 'cpassword',
34                         message: '确认密码与密码不一致'
35                     }
36 
37 
38                 }
39             },
40             'cpassword':{
41                 message :'确认密码验证失败!',
42                 validators:{
43                     notEmpty:{
44                         message:'确认密码不能为空'
45                     },
46                     identical: {
47                         field: 'password',
48                         message: '确认密码与密码不一致'
49                     }
50 
51                 }
52             },
53             'iphone':{
54                 message :'手机号验证失败!',
55                 validators:{
56                     notEmpty:{
57                         message:'手机号不能为空'
58                     },
59                     remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
60                         url: 'action.php?c=HLogin&a=phoneNumber2',//验证地址
61                         message: '手机号已存在',//提示消息
62                         delay :  1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
63                         type: 'POST',
64                         data: function(validator) {
65                               return {
66                                   phone_number: $('#iphone_0').val()
67                               };
68                            }
69 
70                     }
71                 }
72             }
73             };
74             //添加验证
75             base.validate("#userForm",fields);
76         }

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

 1     public function phoneNumber2Action()
 2     {
 3         $phone = $_REQUEST["phone_number"];
 4 
 5         $UserModel = new UserModel();
 6         $UserModel->getDataRow( " where iphone = $phone ");
 7 
 8         if ($UserModel->getDB) {
 9             // $arr[""]
10             // echo json_encode(false);
11             echo '{"valid":false}';
12         } else {
13             // echo json_encode(true);
14             echo '{"valid":true}';
15         }
16 
17 
18     }

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