Jquery插件validate使用一則

時間 2019-11-16

原文原文鏈接

jquery.validate是一個基於jquery的很是優秀的驗證框架，能夠經過它迅速驗證一些常見的輸入，而且能夠本身擴充本身的驗證方法。javascript

主要功能有：php

驗證url，email，number，length，require等。css

默認校驗規則：html

(1)required:true               必輸字段
(2)remote:"check.php"          使用ajax方法調用check.php驗證輸入值
(3)email:true                  必須輸入正確格式的電子郵件
(4)url:true                    必須輸入正確格式的網址
(5)date:true                   必須輸入正確格式的日期日期校驗ie6出錯，慎用
(6)dateISO:true                必須輸入正確格式的日期(ISO)，例如：2009-06-23，1998/01/22 只驗證格式，不驗證有效性
(7)number:true                 必須輸入合法的數字(負數，小數)
(8)digits:true                 必須輸入整數
(9)creditcard:                 必須輸入合法的信用卡號
(10)equalTo:"#field"           輸入值必須和#field相同
(11)accept:                    輸入擁有合法後綴名的字符串（上傳文件的後綴）
(12)maxlength:5                輸入長度最可能是5的字符串(漢字算一個字符)
(13)minlength:10               輸入長度最小是10的字符串(漢字算一個字符)
(14)rangelength:[5,10]         輸入長度必須介於 5 和 10 之間的字符串")(漢字算一個字符)
(15)range:[5,10]               輸入值必須介於 5 和 10 之間
(16)max:5                      輸入值不能大於5
(17)min:10                     輸入值不能小於10java

validate安裝：jquery

下載validation，官網地址 http://jqueryvalidation.org/ 得到最新版本的js文件。git

導入js庫：ajax

Html結構例如app

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery validation plug-in - main demo</title>
        <script type="text/javascript" src="jquery-1.7.2.js">
        </script>
        <script type="text/javascript" src="jquery.validate.min.js">
        </script>
        <script type="text/javascript" src="base.js">
        </script>
    </head>
    <body>
        <h1>validate測試</h1>
        <form method="get" action="" id="form1">
            <p>
                <label for="cname">
                    用戶名
                </label>
                <input name="cname" type="text" class="required" minlength="2"/>
            </p>
            <p>
                <label for="cemail">
                    E-Mail
                </label>
                <input type="email" name="cemail" class="required email"/>
            </p>
            <p>
                <label for="curl">
                    URL
                </label>
                <input type="text" name="curl" class="url" />
            </p>
            <p>
                <label for="password">
                    密碼
                </label>
                <input type="password" id="password" name="password" />
            </p>
            <p>
                <label for="confirm_password">
                    確認密碼
                </label>
                <input type="password" name="confirm_password" />
            </p>
            <p>
                <label for="ccomment">
                    自定義
                </label>
                <input type="text" name="comment" />
            </p>
            <p>
                <input class="submit" type="submit" value="Submit"/>
            </p>
        </form>
    </body>
</html>

將校驗寫在Js代碼中：框架

例如

jQuery.extend(jQuery.validator.messages, {
    required: "必選字段",
    remote: "請修正該字段",
    email: "請輸入正確格式的電子郵件",
    url: "請輸入合法的網址",
    date: "請輸入合法的日期",
    dateISO: "請輸入合法的日期 (ISO).",
    number: "請輸入合法的數字",
    digits: "只能輸入整數",
    creditcard: "請輸入合法的信用卡號",
    equalTo: "請再次輸入相同的值",
    accept: "請輸入擁有合法後綴名的字符串",
    maxlength: jQuery.validator.format("請輸入一個 長度最可能是 {0} 的字符串"),
    minlength: jQuery.validator.format("請輸入一個 長度最少是 {0} 的字符串"),
    rangelength: jQuery.validator.format("請輸入 一個長度介於 {0} 和 {1} 之間的字符串"),
    range: jQuery.validator.format("請輸入一個介於 {0} 和 {1} 之間的值"),
    max: jQuery.validator.format("請輸入一個最大爲{0} 的值"),
    min: jQuery.validator.format("請輸入一個最小爲{0} 的值")
});
//自定義校驗規則
jQuery.validator.addMethod("mobileNum", function(value, element){
    return this.optional(element) || /^((13[456789])|(15[012789])|(18[2378]))\d{8}$/.test(value);
});
$(function(){
    $("#form1").validate({
        errorElement: "span",// 使用"div"標籤標記錯誤， 默認:"label"
        wrapper: "div",// 使用"li"標籤再把上邊的errorELement包起來
        errorClass: "validate-error",// 錯誤提示的css類名"error"
        rules: {
            cname: {// 須要進行驗證的輸入框name
                required: true,// 驗證條件：必填
                minlength: 2// 驗證條件：最小長度爲2
            },
            cemail: {// 須要進行驗證的輸入框name
                required: true,// 驗證條件：必填
                email: true// 驗證條件：格式爲email
            },
            curl: {// 須要進行驗證的輸入框name
                required: true,// 驗證條件：必填
                url: true// 驗證條件：格式爲url
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            comment: {
                required: true,
                number: true,
                mobileNum: true
            }
        },
        messages: {
            cname: {
                required: "用戶名不容許爲空!"// 驗證未經過的消息
            },
            cemail: {
                required: "地址不能爲空",
                email: "輸入正確的url"
            },
            curl: {
                required: "地址不能爲空",
                url: "輸入正確的url"
            },
            password: {
                required: "請輸入密碼",
                minlength: "密碼的最小長度是{0}個字符"
            },
            confirm_password: {
                required: "請輸入確認密碼",
                minlength: "確認密碼的最小長度是{0}個字符",
                equalTo: "確認密碼與密碼不相等"
            },
            comment: {
                required: "不能爲空!",
                mobileNum: "輸入數字不符合要求"
            }
        },
        errorPlacement: function(error, element){
            element.parent().append(error);
        },
        submitHandler: function(form){
            form.submit();
        },
        success: function(error, element){
            error.remove();
        }
    })
});

將校驗規則寫到控件中：

例如

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery validation plug-in - main demo</title>
        <script type="text/javascript" src="jquery-1.7.2.js">
        </script>
        <script type="text/javascript" src="jquery.validate.min.js">
        </script>
        <script>
            $(function(){
                $("#form1").validate();
            })
        </script>
        <script type="text/javascript" src="base.js">
        </script>
    </head>
    <body>
        <h1>validate測試</h1>
        <form method="get" action="" id="form1">
            <p>
                <label for="cname">
                    用戶名
                </label>
                <input name="cname" type="text" class="required" minlength="2"/>
            </p>
            <p>
                <label for="cemail">
                    E-Mail
                </label>
                <input type="email" name="cemail" class="required email"/>
            </p>
            <p>
                <label for="curl">
                    URL
                </label>
                <input type="text" name="curl" class="url" />
            </p>
            <p>
                <label for="ccomment">
                    自定義
                </label>
                <input type="text" name="comment" />
            </p>
            <p>
                <input class="submit" type="submit" value="Submit"/>
            </p>
        </form>
    </body>
</html>