本篇內(nèi)容介紹了“jQuery中的validation插件有什么作用”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
成都創(chuàng)新互聯(lián)公司專注于博樂網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供博樂營銷型網(wǎng)站建設(shè)，博樂網(wǎng)站制作、博樂網(wǎng)頁設(shè)計、博樂網(wǎng)站官網(wǎng)定制、
微信小程序服務(wù)，打造博樂網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供
博樂網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
前面的話
最常使用javascript的場合就是表單的驗證，而jQuery作為一個優(yōu)秀的javascript庫，也提供了一個優(yōu)秀的表單驗證插件——Validation。Validation是歷史最悠久的jQuery插件之一，經(jīng)過了全球范圍內(nèi)不同項目的驗證，并得到了許多Web開發(fā)者的好評。本文將詳細(xì)介紹validation插件
概述
jQuery Validate插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應(yīng)用程序各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認(rèn)使用英語作為錯誤信息，且已翻譯成其他 37 種語言
作為一個標(biāo)準(zhǔn)的驗證方法庫，Validation擁有以下特點：
1、內(nèi)置驗證規(guī)則：擁有必填、數(shù)字、E-Mail、URL和信用卡號等19類內(nèi)置驗證規(guī)則
2、自定義驗證規(guī)則：可以很方便地自定義驗證規(guī)則
3、簡單強大的驗證信息提示：默認(rèn)了驗證信息提示，并提供自定義覆蓋默認(rèn)提示信息的功能
4、實時驗證：可以通過keyup或blur事件觸發(fā)驗證
validation作為jQuery的一個插件，使用時需要同jQuery一起引入，注意要先引入jquery
快速上手
validation功能強大且API眾多，如果要快速上手，只要掌握常用功能即可
用戶名：
密碼：
上述代碼主要對name為'username'和'password'這兩個input控件進(jìn)行了校驗，這兩個控件必須填寫內(nèi)容，且字符長度必須在2-10之間
校驗規(guī)則
在快速上手的例子中，使用了required、minlength和maxlength這三個校驗規(guī)則。實際上validation的校驗規(guī)則有17個之多
序號 規(guī)則 描述
required:true 必須輸入的字段
remote:"check.php" 使用 ajax 方法調(diào)用 check.php 驗證輸入值
email:true 必須輸入正確格式的電子郵件
url:true 必須輸入正確格式的網(wǎng)址
date:true 必須輸入正確格式的日期，內(nèi)部調(diào)用Date.parse()方法進(jìn)行校驗
dateISO:true 必須輸入正確格式的日期(ISO)，如：2009-06-23，1998/01/22
number:true 必須輸入合法的數(shù)字(負(fù)數(shù)，小數(shù))
digits:true 必須輸入整數(shù)
creditcard: 必須輸入合法的信用卡號
equalTo:"#field" 輸入值必須和 #field 相同
accept: 輸入擁有合法后綴名的字符串(上傳文件的后綴)
maxlength:5 輸入長度最多是 5 的字符串(漢字算一個字符)
minlength:10 輸入長度最小是 10 的字符串(漢字算一個字符)
rangelength:[5,10] 輸入長度必須介于 5 和 10 之間的字符串(漢字算一個字符)
range:[5,10] 輸入值必須介于 5 和 10 之間
max:5 輸入值不能大于 5
min:10 輸入值不能小于 10
下面使用一個更詳細(xì)的例子，對上面的17個規(guī)則進(jìn)行應(yīng)用
用戶名：
密碼：
確認(rèn)密碼
電子郵件：
網(wǎng)址：
生日：
隨機數(shù)(0-9)：
信用卡號：
默認(rèn)提示
由上面的例子中看出，validate的默認(rèn)提示是英文的
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: "請輸入有效的網(wǎng)址",
date: "請輸入有效的日期",
dateISO: "請輸入有效的日期 (YYYY-MM-DD)",
number: "請輸入有效的數(shù)字",
digits: "只能輸入數(shù)字",
creditcard: "請輸入有效的信用卡號碼",
equalTo: "你的輸入不相同",
extension: "請輸入有效的后綴",
maxlength: $.validator.format("最多可以輸入 {0} 個字符"),
minlength: $.validator.format("最少要輸入 {0} 個字符"),
rangelength: $.validator.format("請輸入長度在 {0} 到 {1} 之間的字符串"),
range: $.validator.format("請輸入范圍在 {0} 到 {1} 之間的數(shù)值"),
max: $.validator.format("請輸入不大于 {0} 的數(shù)值"),
min: $.validator.format("請輸入不小于 {0} 的數(shù)值")
});使用方式
上面的例子中，validate控件的使用，都是通過使用validate()方法完成的，由于這種方法將HTML結(jié)構(gòu)和javascript邏輯分離，使得代碼更加優(yōu)化
實際上，還有另一種方法就是通過添加HTML屬性的方式或添加class類名的方式來進(jìn)行驗證，類似于HTML5新增的input類控件的功能
由于已經(jīng)將驗證規(guī)則添加到HTML元素中，所以調(diào)用validate()方法時，參數(shù)為空
用戶名：
電子郵件：
網(wǎng)址：
更改提示
無論是validate插件自帶的英文提示，或者是其擴展的中文提示，可能與實際項目的需求不相符。這時，就需要我們對錯誤提示進(jìn)行更改
而更改錯誤提示的方法也很簡單，只需要使用validate()函數(shù)里的，messages()方法即可。如果某個控件沒有使用messages()方法，則使用默認(rèn)的錯誤提示信息。如下所示
在messages()方法中，{0}代表rules()方法當(dāng)前規(guī)則的屬性值
用戶名：
電子郵件：
網(wǎng)址：
美化樣式
實際上，validate插件輸出錯誤信息的方式是通過增加一個label控件實現(xiàn)的，該label控件的id名為'輸入控件的id名-error'，類名為'error'，且位于輸入控件的右側(cè)
下表中列出了關(guān)于錯誤信息的相關(guān)屬性的方法
參數(shù) 類型 默認(rèn)值 描述
errorClass String "error" 指定錯誤提示的css類名
errorElement String "label" 用什么標(biāo)簽標(biāo)記錯誤
errorContainer Selector 無 顯示或者隱藏驗證信息，可以自動實現(xiàn)有錯誤信息出現(xiàn)時把容器屬性變?yōu)轱@示，無錯誤時隱藏，用處不大。如errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer Selector 無 把錯誤信息統(tǒng)一放在一個容器里面
wrapper String 無 用什么標(biāo)簽再把上邊的errorELement包起來
【成功樣式】
validate插件有一個success()方法，用來設(shè)置要驗證的元素通過驗證后的動作，如果跟一個字符串，會當(dāng)作一個css類，也可跟一個函數(shù)
success：String,Callback
success: function(label) {
label.html(" ").addClass("success");
}
success: "success"但實際上，validate插件只是將label標(biāo)簽添加了一個'success'類，且原先的'error'類并沒有刪除。且經(jīng)過實際測試，'error'類名無法刪除，刪除之后，每次驗證成功時，validate插件都會自動再生成一個label標(biāo)簽
所以，success的效果無法正常使用，這應(yīng)該是validate插件的一個bug
用戶名：
電子郵件：
網(wǎng)址：
自定義驗證
由于需求的需要，除提供的默認(rèn)驗證規(guī)則外，還需要自定義驗證規(guī)則，滿足業(yè)務(wù)需要。這時就需要使用addMethod()方法
【addMethod(】
addMethod(name,method,message)方法用來添加一個新的驗證方法
參數(shù) name 是添加的方法的名字。參數(shù) method 是一個函數(shù)，接收三個參數(shù) (value,element,param)。value 是元素的值，element 是元素本身，param 是參數(shù)
以驗證手機號為例，手機號一般是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);
},
'請輸入正確的手機號碼'
})
手機號碼：
修改觸發(fā)方式
下面的雖然是 boolean 型的，但建議除非要改為 false，否則別亂添加
觸發(fā)方式 類型 描述 默認(rèn)值
onsubmit Boolean 提交時驗證。設(shè)置為 false 就用其他方法去驗證 true
onfocusout Boolean 失去焦點時驗證（不包括復(fù)選框/單選按鈕） true
onkeyup Boolean 在 keyup 時驗證。 true
onclick Boolean 在點擊復(fù)選框和單選按鈕時驗證 true
focusInvalid Boolean 提交表單后，未通過驗證的表單會獲得焦點 true
focusCleanup Boolean 如果是true，當(dāng)未通過驗證的元素獲得焦點時，移除錯誤提示 false
遠(yuǎn)程校驗
使用 ajax 方式進(jìn)行驗證，默認(rèn)會提交當(dāng)前驗證的值到遠(yuǎn)程地址，如果需要提交其他的值，可以使用 data 選項
[注意]遠(yuǎn)程地址只能輸出 "true" 或 "false"，不能有其他輸出
remote: {
url: "check-email.php", //后臺處理程序
type: "post", //數(shù)據(jù)發(fā)送方式
dataType: "json", //接受數(shù)據(jù)格式
data: { //要傳遞的數(shù)據(jù)
username: function() {
return $("#username").val();
}
}
}
請選擇數(shù)字
1
2
3
最后
validation插件的功能不只于此，但本文基本上把常用的功能進(jìn)行了詳細(xì)的介紹。如果要了解validation更高級的功能，請移步官方網(wǎng)站
最后介紹一個比較有趣的知識——validate、validation和validator，它們的中文意思是驗證。validation插件的js文件名是validate.js，validation插件中最常用的方法就是validate()方法，基本上所有的驗證操作都通過該方法進(jìn)行。如果要進(jìn)行自定義驗證的話，則需要用到validator對象下的靜態(tài)方法addMethod()
“jQuery中的validation插件有什么作用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
標(biāo)題名稱：jQuery中的validation插件有什么作用-創(chuàng)新互聯(lián)
本文地址：
http://weahome.cn/article/dchesj.html
重慶分公司
重慶分公司
