1)jquery validate 遠程驗證remote,自定義驗證

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" id="registerForm">
 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" id="password" placeholder="輸入密碼" oncontextmenu="return false" onpaste="return false" />
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" id="number"/>
20         </div>
21         <!-- <div>
22             <input type="email" name="email" class="email" placeholder="輸入郵箱地址" oncontextmenu="return false" onpaste="return false" />
23         </div> -->
24 
25         <button id="submit" type="submit">注 冊</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}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue element 自定義表單驗證(驗證手機號) jquery validate 自定義驗證方法日期驗證 JS驗證手機號 Java驗證手機號增加 jQueryValidate的手機號驗證功能 java簡單正則驗證手機號 Java處理正則驗證手機號-詳解 java驗證手機號格式 js正則手機號驗證 Java處理正則驗證手機號-詳解