jQuery插件之validation插件

時間  2019-11-09
標籤 jquery 插件 validation 欄目 JQuery 简体版
原文   原文鏈接

前面的話

　　最常使用javascript的場合就是表單的驗證，而jQuery做爲一個優秀的javascript庫，也提供了一個優秀的表單驗證插件——Validation。Validation是歷史最悠久的jQuery插件之一，通過了全球範圍內不一樣項目的驗證，並獲得了許多Web開發者的好評。本文將詳細介紹validation插件javascript

 

概述

　　jQuery Validate插件爲表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定製選項，知足應用程序各類需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。全部的捆綁方法默認使用英語做爲錯誤信息，且已翻譯成其餘 37 種語言php

　　做爲一個標準的驗證方法庫，Validation擁有如下特色：css

　　一、內置驗證規則：擁有必填、數字、E-Mail、URL和信用卡號等19類內置驗證規則html

　　二、自定義驗證規則：能夠很方便地自定義驗證規則java

　　三、簡單強大的驗證信息提示：默認了驗證信息提示，並提供自定義覆蓋默認提示信息的功能jquery

　　四、實時驗證：能夠經過keyup或blur事件觸發驗證git

　　validation做爲jQuery的一個插件，使用時須要同jQuery一塊兒引入，注意要先引入jqueryajax

<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery.validate-1.13.1.js"></script>

 

快速上手

　　validation功能強大且API衆多，若是要快速上手，只要掌握經常使用功能便可json

<form id="demoForm">
    <p>
        <label for="username">用戶名：</label>
        <input type="text" id="username" name="username"/>
    </p>
    <p>
        <label for="password">密碼：</label>
        <input type="password" id="password" name="password"/>
    </p>

    <p>
        <input type="submit" value="登陸"/>
    </p>
</form> 
<script>
$('#demoForm').validate({
    rules:{
        username:{
            required: true,
            minlength: 2,
            maxlength: 10
        },
        password:{
            required: true,
            minlength: 2,
            maxlength:10
        }
    }
})
</script>

　　上述代碼主要對name爲'username'和'password'這兩個input控件進行了校驗，這兩個控件必須填寫內容，且字符長度必須在2-10之間app

校驗規則

　　在快速上手的例子中，使用了required、minlength和maxlength這三個校驗規則。實際上validation的校驗規則有17個之多

序號           規則                       描述
1             required:true             必須輸入的字段
2             remote:"check.php"        使用 ajax 方法調用 check.php 驗證輸入值
3             email:true                必須輸入正確格式的電子郵件
4             url:true                  必須輸入正確格式的網址
5             date:true                 必須輸入正確格式的日期，內部調用Date.parse()方法進行校驗
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                    輸入值不能小於 10

　　下面使用一個更詳細的例子，對上面的17個規則進行應用 

<form id="demoForm">
    <p>
        <label for="username">用戶名：</label>
        <input type="text" id="username" name="username"/>
    </p>
    <p>
        <label for="password">密碼：</label>
        <input type="password" id="password" name="password"/>
    </p>
   <p>
        <label for="confirm-password">確認密碼</label>
        <input type="password" id="confirm-password" name="confirm-password"/>
    </p>
    <p>
        <label for="email">電子郵件：</label>
        <input id="email" name="email"/>
    </p>
    <p>
        <label for="url">網址：</label>
        <input id="url" name="url"/>
    </p>
    <p>
        <label for="date">生日：</label>
        <input id="date" name="date"/>
    </p>
    <p>
        <label for="num">隨機數(0-9)：</label>
        <input id="num" name="num"/>
    </p>
    <p>
        <label for="card">信用卡號：</label>
        <input id="card" name="card"/>
    </p>
    <p>
        <input type="submit" value="登陸"/>
    </p>
</form> 
<script>
$('#demoForm').validate({
    rules:{
        username:{
            required: true,
            maxlength: 10
        },
        password:{
            required: true,
            range:[5,10]
        },
        'confirm-password':{
            equalTo: "#password"
        },
        email:{
            email:true
        },
        url:{
            url:true
        },
        date:{
            dateISO:true
        },
        num:{
            min:0,
            max:9
        },
        card:{
            creditcard:true
        }
    }
})
</script>

默認提示

　　由上面的例子中看出，validate的默認提示是英文的

messages: {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date ( ISO ).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    maxlength: $.validator.format( "Please enter no more than {0} characters." ),
    minlength: $.validator.format( "Please enter at least {0} characters." ),
    rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
    range: $.validator.format( "Please enter a value between {0} and {1}." ),
    max: $.validator.format( "Please enter a value less than or equal to {0}." ),
    min: $.validator.format( "Please enter a value greater than or equal to {0}." )
}

　　不過能夠將其修改成中文，只要加入如下代碼

$.extend($.validator.messages, {
    required: "這是必填字段",
    remote: "請修正此字段",
    email: "請輸入有效的電子郵件地址",
    url: "請輸入有效的網址",
    date: "請輸入有效的日期",
    dateISO: "請輸入有效的日期 (YYYY-MM-DD)",
    number: "請輸入有效的數字",
    digits: "只能輸入數字",
    creditcard: "請輸入有效的信用卡號碼",
    equalTo: "你的輸入不相同",
    extension: "請輸入有效的後綴",
    maxlength: $.validator.format("最多能夠輸入 {0} 個字符"),
    minlength: $.validator.format("最少要輸入 {0} 個字符"),
    rangelength: $.validator.format("請輸入長度在 {0} 到 {1} 之間的字符串"),
    range: $.validator.format("請輸入範圍在 {0} 到 {1} 之間的數值"),
    max: $.validator.format("請輸入不大於 {0} 的數值"),
    min: $.validator.format("請輸入不小於 {0} 的數值")
});

使用方式

　　上面的例子中，validate控件的使用，都是經過使用validate()方法完成的，因爲這種方法將HTML結構和javascript邏輯分離，使得代碼更加優化

　　實際上，還有另外一種方法就是經過添加HTML屬性的方式或添加class類名的方式來進行驗證，相似於HTML5新增的input類控件的功能

　　因爲已經將驗證規則添加到HTML元素中，因此調用validate()方法時，參數爲空

<form id="demoForm">
    <p>
        <label for="username">用戶名：</label>
        <input type="text" id="username" name="username" class="required" minlength="2"/>
    </p>
    <p>
        <label for="email">電子郵件：</label>
        <input id="email" name="email" class="required email"/>
    </p>
    <p>
        <label for="url">網址：</label>
        <input id="url" name="url" class="url"/>
    </p>
    <p>
        <input type="submit" value="登陸"/>
    </p>
</form> 
<script>
$('#demoForm').validate({})
</script>

更改提示

　　不管是validate插件自帶的英文提示，或者是其擴展的中文提示，可能與實際項目的需求不相符。這時，就須要咱們對錯誤提示進行更改

　　而更改錯誤提示的方法也很簡單，只須要使用validate()函數裏的，messages()方法便可。若是某個控件沒有使用messages()方法，則使用默認的錯誤提示信息。以下所示

　　在messages()方法中，{0}表明rules()方法當前規則的屬性值

<form id="demoForm">
    <p>
        <label for="username">用戶名：</label>
        <input type="text" id="username" name="username" />
    </p>
    <p>
        <label for="email">電子郵件：</label>
        <input id="email" name="email" />
    </p>
    <p>
        <label for="url">網址：</label>
        <input id="url" name="url"/>
    </p>
    <p>
        <input type="submit" value="登陸"/>
    </p>
</form> 
<script>
$('#demoForm').validate({
    rules:{
        username:{
            required: true,
            minlength: 2,
            maxlength: 10
        },
        email:{
            required: true,
            email:true
        },
        url:{
            required: true,
            url:true            
        }
    },
    messages:{
        username:{
            required:"請輸入用戶名",
            minlength:"至少輸入{0}個字符"
        },
        email:{
            required:"請輸入郵箱",
            email:"郵箱格式不正確"
        },
        url:{
            required:"請輸入網址",
            url:"網址格式不正確(完整的網址應包括http://或https://)"
        }
    }
})
</script>

美化樣式

　　實際上，validate插件輸出錯誤信息的方式是經過增長一個label控件實現的，該label控件的id名爲'輸入控件的id名-error'，類名爲'error'，且位於輸入控件的右側

　　下表中列出了關於錯誤信息的相關屬性的方法

參數                　　類型        　　默認值        　　描述    
errorClass             String        "error"        指定錯誤提示的css類名    
errorElement        　　String        "label"        用什麼標籤標記錯誤    
errorContainer         Selector   　　 無            顯示或者隱藏驗證信息，能夠自動實現有錯誤信息出現時把容器屬性變爲顯示，無錯誤時隱藏，用處不大。如errorContainer: "#messageBox1, #messageBox2"    
errorLabelContainer    Selector    　　無            把錯誤信息統一放在一個容器裏面    
wrapper                String       　 無            用什麼標籤再把上邊的errorELement包起來

【成功樣式】

　　validate插件有一個success()方法，用來設置要驗證的元素經過驗證後的動做，若是跟一個字符串，會看成一個css類，也可跟一個函數

success：String,Callback
success: function(label) {
    label.html("&nbsp;").addClass("success");
}    

success: "success"

　　但實際上，validate插件只是將label標籤添加了一個'success'類，且原先的'error'類並無刪除。且通過實際測試，'error'類名沒法刪除，刪除以後，每次驗證成功時，validate插件都會自動再生成一個label標籤

　　因此，success的效果沒法正常使用，這應該是validate插件的一個bug

<style>
label.error{background: no-repeat 0 4px;background-image:url('unchecked.gif');margin-left:6px;padding-left:14px;color:red;}
</style>
<body>
<form id="demoForm">
    <p>
        <label for="username">用戶名：</label>
        <input type="text" id="username" name="username" />
    </p>
    <p>
        <label for="email">電子郵件：</label>
        <input id="email" name="email" />
    </p>
    <p>
        <label for="url">網址：</label>
        <input id="url" name="url"/>
    </p>
    <p>
        <input type="submit" value="登陸"/>
    </p>
</form> 
<script>
$('#demoForm').validate({
    rules:{
        username:{
            required: true,
            minlength: 2,
            maxlength: 10
        },
        email:{
            required: true,
            email:true
        },
        url:{
            required: true,
            url:true            
        }
    },
    messages:{
        username:{
            required:"請輸入用戶名",
            minlength:"至少輸入{0}個字符",
            maxlength:"最多輸入{0}個字符"
        },
        email:{
            required:"請輸入郵箱",
            email:"郵箱格式不正確"
        },
        url:{
            required:"請輸入網址",
            url:"網址格式不正確(完整的網址應包括http://或https://)"
        }
    }   
})
</script>

自定義驗證

　　因爲需求的須要，除提供的默認驗證規則外，還須要自定義驗證規則，知足業務須要。這時就須要使用addMethod()方法

【addMethod(】

　　addMethod(name,method,message)方法用來添加一個新的驗證方法

　　參數 name 是添加的方法的名字。參數 method 是一個函數，接收三個參數 (value,element,param)。value 是元素的值，element 是元素自己，param 是參數

　　以驗證手機號爲例，手機號通常是11位，前3位是號段，後8位通常沒有限制。並且，在手機開頭極可能有0或+86

//開頭
(0|\+86)?
//前3位
13\d|14[579]|15[0-35-9]|17[0135-8]|18\d
//後8位
\d{8}
//手機號碼
var phone = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/;
$.validator.addMethod({
    'phone',
    function(value,element,param){
        var reg = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/;
        return value.test(reg);
    },
    '請輸入正確的手機號碼'
})
<style>
label.error{margin-left:6px;padding-left:14px;color:red;background: no-repeat 0 4px;background-image:url('data:image/gif;base64,R0lGODlhDgAOAMQAAOpSAPWpgPvf0O5zMPGIUPe+n////+tdEPjJsP718POecO1oIPrUwPzq4Pa0kPKTYPSof////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUABEALAAAAAAOAA4AAAVcYCQm0AAAA5SIbHGcMHAULazEJ528AGIsgADDIUsEYAYDopBsAAOmXDLpOkVPB0ETFxskpjeY6fD4GhrJBAF1zCYDBx/jFYi8DoEH9yAqcGM0fTwxMywsUFZ1LCEAOw==');}
</style>

<form id="demoForm">
    <p>
        <label for="phone">手機號碼：</label>
        <input type="text" id="phone" name="phone" />
    </p>
    <p>
        <input type="button" value="提交">
    </p>
</form> 
<script>
$.validator.addMethod(
    'phone',
    function(value,element,param){
        var reg = /^(0|\+86)?(13\d|14[579]|15[0-35-9]|17[0135-8]|18\d)\d{8}$/;
        return reg.test(value);
    },
    '請輸入正確的手機號碼'
);
$('#demoForm').validate({
    rules:{
        phone:{
            required: true,
            phone:true            
        }
    },
    messages:{
        phone:{
            required:"請輸入手機號碼"
        }
    }   
})
</script>

修改觸發方式

　　下面的雖然是 boolean 型的，但建議除非要改成 false，不然別亂添加

觸發方式    　　　　 類型    　　描述    　　　　　　　　　　　　　　　　　　　　　　　　默認值
onsubmit    　　　 Boolean    提交時驗證。設置爲 false 就用其餘方法去驗證    　　　　true
onfocusout    　　 Boolean    失去焦點時驗證（不包括複選框/單選按鈕）  　　　　　　　 true
onkeyup    　　　　Boolean    在 keyup 時驗證。   　　　　　　　　　　　　　　　　　　true
onclick    　　　　Boolean    在點擊複選框和單選按鈕時驗證   　　　　　　　　　　　　　true
focusInvalid    　Boolean    提交表單後，未經過驗證的表單會得到焦點   　　　　　　 　 true
focusCleanup    　Boolean    若是是true，當未經過驗證的元素得到焦點時，移除錯誤提示  false

 

遠程校驗

　　使用 ajax 方式進行驗證，默認會提交當前驗證的值到遠程地址，若是須要提交其餘的值，可使用 data 選項

　　[注意]遠程地址只能輸出 "true" 或 "false"，不能有其餘輸出

remote: {
    url: "check-email.php",     //後臺處理程序
    type: "post",               //數據發送方式
    dataType: "json",           //接受數據格式   
    data: {                     //要傳遞的數據
        username: function() {
            return $("#username").val();
        }
    }
}
<style>
label.error{margin-left:6px;padding-left:14px;color:red;background: no-repeat 0 4px;background-image:url('data:image/gif;base64,R0lGODlhDgAOAMQAAOpSAPWpgPvf0O5zMPGIUPe+n////+tdEPjJsP718POecO1oIPrUwPzq4Pa0kPKTYPSof////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAUUABEALAAAAAAOAA4AAAVcYCQm0AAAA5SIbHGcMHAULazEJ528AGIsgADDIUsEYAYDopBsAAOmXDLpOkVPB0ETFxskpjeY6fD4GhrJBAF1zCYDBx/jFYi8DoEH9yAqcGM0fTwxMywsUFZ1LCEAOw==');}
</style>
<form id="demoForm">
    <p>
        <label for="num">請選擇數字</label>
        <select name="num" id="num">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </p>
    <p>
        <input type="button" value="提交">
    </p>
</form> 
<script>
$('#demoForm').validate({
    rules:{
        num:{
            remote:"validateTest.php"
        }
    },
    messages:{
        num:{
            remote:"選擇的數字不正確"
        }
    }
});
</script>
<?php
function test_input($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
}
$data = test_input($_REQUEST['num']);
if($data == '2'){
    echo "true";
}else{
    echo "false";
}
?>

 

最後

　　validation插件的功能不僅於此，但本文基本上把經常使用的功能進行了詳細的介紹。若是要了解validation更高級的功能，請移步官方網站

　　最後介紹一個比較有趣的知識——validate、validation和validator，它們的中文意思是驗證。validation插件的js文件名是validate.js，validation插件中最經常使用的方法就是validate()方法，基本上全部的驗證操做都經過該方法進行。若是要進行自定義驗證的話，則須要用到validator對象下的靜態方法addMethod()

　　以上

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程