jquery.validation校驗

時間 2019-12-14

標籤 jquery.validation jquery validation 校驗欄目 JQuery 简体版

原文原文鏈接

jquery Validata驗證框架的詳解php

首先導入js庫css

1.validate(options)是運行form表單的開始，他是用來驗證你所選的form，以上代碼的第五行「#myForm"是form的id名。jquery

2.rules() 是校驗規則他就是validate裏的options,是用戶定義的鍵/值對規則。鍵爲一個表單元素的 name屬性、值爲一個簡單的字符串或者由規則/參數對組成的一個對象。 git

3. messages ()是用戶自定義的鍵/值對消息===鍵爲一個表單元素的name屬性，值爲該表單元素將要顯示的消息。ajax

默認的校驗規則json

(1).required:true ---必需要填寫的字段框架

(2).remote:"remote-valid.jsp" ---使用ajax方法調用remote-valid.jsp驗證輸入值jsp

(3).email:true ---必須輸入正確格式的電子郵件ui

(4).url:true ---必須輸入正確格式的網址

(5).date:true ---必須輸入爭取格式的日期，日期校驗ie6出錯，慎用

(6).dateISO:true ---必須輸入正確格式的日期（例如：2017-06-20, 2017/06/20）只驗證格式，不驗證有效性

(7).number:true ---必須輸入合法的數字（負數，小數）

(8).digits:true ---必須輸入整數

(9).creditcard:true ---必須輸入合法的信用卡號

(10).equalTo:"#password" ---輸入值必須和#password相同

(11).accept： --- 輸入擁有合法的後綴名的字符串（上傳文件的後綴）

(12).maxlength:5 ---輸入長度最多的是5的字符串（漢字算一個字符）

(13).minlength:10 ---輸入長度最小的是10的字符串（漢字算一個字符）

(14).ranglength:[5.10] ---輸入的長度必須介於 5 和 10 之間的字符串（漢字算一個字符）

(15).range:[5,10] ---輸入值必須介於 5 和 10 之間

(16).max:5 ---輸入值不能大於5

(17).min:10 ---輸入值不能小於10

其用法爲：

<!DOCTYPE html>
<html>

    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            #img {
                display: none;
                width: 30px;
                height: 30px;
            }
        </style>
        <script src="jquery.validation/jquery-1.9.1.js"></script>
        <script src="jquery.validation/jquery.validate.min.js"></script>
        <script src="js/ajax1.js"></script>
        <script>
            $(function() {
                var oLgn = $("#lgn");
                var oReg = $("#reg");
                var oImg = $("#img");
                var oSpan = $("#span");
                var oUser = $("#user");
                var oPass = $("#pass");
                $('#demoForm').validate({
                    rules: {
                        //用戶名
                        username: {
                            required: true,
                            rangelength: [6, 11]
                        },
                        //密碼
                        password: {
                            required: true,
                            rangelength: [11, 13]
                        },

                    },
                    messages: {
                        //用戶名
                        username: {
                            required: '此項必填',
                            rangelength: '用戶名長度爲6-11位'
                        },
                        //密碼
                        password: {
                            required: '此項必填',
                            rangelength: '用戶名長度爲11-13位'
                        }

                    },
                    submitHandler: function() {
                        oLgn.on('click', function() {
                            myAjax('user.php', "lgn", oUser.val(), oPass.val());
                        });
                        oReg.on('click', function() {
                            myAjax('user.php', "add", oUser.val(), oPass.val());
                        })
                        //myAjax('user.php',"lgn",oUser.val(),oPass.val());
                        function myAjax(url, act, userValue, passValue) {
                            $.ajax({
                                url: url,
                                data: {
                                    act: act,
                                    user: userValue,
                                    pass: passValue
                                },
                                beforeSend: function() {
                                    oImg.css("display", "block")
                                },
                                success: function(res) {
                                    var json = eval('(' + res + ')');
                                    oSpan.html(json.msg);
                                },
                                complete: function() {
                                    oImg.css("display", "none")
                                }
                            })
                        }
                    },
                });
            });
            
            
        </script>

    </head>

    <body>
        <form action="" id="demoForm">
            <p>
                <label for="user">username:</label>
                <input type="text" name="username" id="user" />
            </p>
            <p>
                <label for="pass">password:</label>
                <input type="text" name="password" id="pass" />
            </p>
            <p><input type="submit" value="登陸" id="lgn" />
                <input type="submit" value="註冊" id="reg" /></p>
            <img src="loading.jpg" alt="" id="img" />
            <span id="span"></span>
        </form>
    </body>
</html>

但願以上內容會對你們有所幫助！！！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。