作用

jquery.validate是jquery旗下的一個(gè)驗(yàn)證框架，借助jquery的優(yōu)勢(shì)，我們可以迅速驗(yàn)證一些常見的輸入,并且可以自己擴(kuò)充自己的驗(yàn)證方法，并且對(duì)國際化也有很好的支持。

使用前的布置

說明：需要JQuery版本：1.2.6+

步驟：

要導(dǎo)入相應(yīng)的jQuery.js與jquery.validate.js文件
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>

在相應(yīng)的字段上指定驗(yàn)證規(guī)則
名稱 *<input type="text" name="loginName" class="required">
其中class="required"代表本字段必須要輸入數(shù)據(jù)

指定要對(duì)表單進(jìn)行驗(yàn)證
<script type="text/javascript">

$(function(){

$("#testForm").validate();

});

</script>

?

效果如下圖：

?

?

?

?

?

?

?

基礎(chǔ)知識(shí)

指定驗(yàn)證規(guī)則的方式

把驗(yàn)證規(guī)則寫到字段元素的class屬性中

例：

名稱 *　<input type="text" name="loginName" class="required"><br>

密 ?*　 <input type="password" name="password" class="required"><br>

再次輸入 <input type="password" name="password2"

class="{equalTo: '[name=password]'} required"><br>

生日　　?<input type="text" name="birthday" class="dateISO"><br>

E-mail *<input type="text" name="email" class="email"><br>

PAR(zip)<input type="file" name="resource" class="{accept: 'zip'}">

?

說明：

如果使用class="{key:value,…}"的方式，必須引入：jquery.metadata.js

表單字段的name不能重復(fù)，否則所配置的驗(yàn)證不起作用。

調(diào)用validate()方法時(shí)傳遞字段的驗(yàn)證規(guī)則

$(function() {

$("#testForm").validate({

rules: {

loginName:{

required: true,

minlength: 2

}?? ,

password: {

required: true

},

password2: {

equalTo: "input[name=password]"

}

}

});

});

內(nèi)置的驗(yàn)證規(guī)則

?

?

?

required:true??????????????	必填字段
remote:"check.php"?????????	使用ajax方法調(diào)用check.php驗(yàn)證輸入值
email:true?????????????????	必須輸入正確格式的電子郵件
url:true???????????????????	必須輸入正確格式的網(wǎng)址
date:true??????????????????	必須輸入正確格式的日期
dateISO:true??????????? ????	必須輸入正確格式的日期(ISO)，例如：2010-01-01，2010/01/01 只驗(yàn)證格式，不驗(yàn)證有效性
number:true????????????????	必須輸入合法的數(shù)字(負(fù)數(shù)，小數(shù))
digits:true????????????????	必須輸入整數(shù)
creditcard:????????????????	必須輸入合法的信用卡號(hào)
equalTo:"#field"??????????	輸入值必須和$(“#field”)相同
accept: "gif|png|jpg"	輸入擁有合法后綴名的字符串（上傳文件的后綴），多個(gè)后綴之間用’|’隔開
maxlength:5???????????????	輸入長(zhǎng)度最多是5的字符串(漢字算一個(gè)字符)
minlength:3??????????????	輸入長(zhǎng)度最小是3的字符串(漢字算一個(gè)字符)
rangelength:[5,10]????????	輸入長(zhǎng)度必須介于 5 和 10 之間的字符串")(漢字算一個(gè)字符)
range:[5,10]??????????????	輸入值必須介于 5 和 10 之間
max:5 ?????????????????????	輸入值不能大于5
min:10????????????????????	輸入值不能小于10

?

?

說明：

remote是遠(yuǎn)程驗(yàn)證：比如注冊(cè)驗(yàn)證用戶名是否已被注冊(cè)，返回值只能是true（驗(yàn)證成功）或false（驗(yàn)證失敗）。在訪問指定的url時(shí)，會(huì)自動(dòng)把當(dāng)前字段的值做為參數(shù)（以字段name為key）傳遞過去。

某些屬性值中的引號(hào)不能省略，否則出錯(cuò)。如accept、equalTo等。

?

remote使用時(shí)遇到的問題：添加用戶時(shí)需要驗(yàn)證用戶名是否存在，當(dāng)添加上一個(gè)用戶后，在不離開該頁面的情況下，再次添加該用戶名的用戶，validate不能提示該用戶已存在，因?yàn)榫彺娴脑?#xff0c;jquery仍認(rèn)為該用戶名可用。解決方法是在頁面中添加：$().ready(function(){

$.ajaxSetup ({

cache: false //關(guān)閉AJAX相應(yīng)的緩存

}); // 關(guān)閉緩存功能

});

添加

?

修改錯(cuò)誤信息提示位置：

修改Jquery validate 的錯(cuò)誤提示位置，把錯(cuò)誤提示在input內(nèi)，當(dāng)獲得鼠標(biāo)焦點(diǎn)的時(shí)候清楚提示信息。
??? 具體使用方法：
var validator = $("#myContainerForm").validate({
focusCleanup:true,//clear the error message when the error element get focus again.
onkeyup:false,
errorPlacement: function(error, element) {?
showErrorMesssgeDiv(error,element);
?? },??
rules:{
?????? name:{
????????????? required: true
?????? }
},
messages: {
?????? name:{
????????????? required:populateErrorMessage($("#errorRequiredMessage").val(), ?????? ?????? $("#containerNameTitle").val())
?????? }?????
}
});

自定義驗(yàn)證規(guī)則

除了內(nèi)置的驗(yàn)證規(guī)則，validation還允許自定義驗(yàn)證規(guī)則。這是通過validation的addMethod()方法實(shí)現(xiàn)的，語法 為：

jQuery.validator.addMethod("name",function,message)

其中:

name為驗(yàn)證規(guī)則的名稱

function定義驗(yàn)證的規(guī)則。參數(shù)有?。返回值為?。

message是驗(yàn)證失敗時(shí)的提示信息。

指定錯(cuò)誤提示內(nèi)容

更改默認(rèn)的提示內(nèi)容

jQuery.extend(jQuery.validator.messages, {

required: "必填字段",

remote: "請(qǐng)指定一個(gè)不重復(fù)的值",

email: "請(qǐng)輸入正確格式的電子郵件",

url: "請(qǐng)輸入合法的網(wǎng)址",

date: "請(qǐng)輸入合法的日期",

dateISO: "請(qǐng)輸入合法的日期 (ISO).",

number: "請(qǐng)輸入合法的數(shù)字",

digits: "只能輸入整數(shù)",

creditcard: "請(qǐng)輸入合法的信用卡號(hào)",

equalTo: "請(qǐng)?jiān)俅屋斎胂嗤闹?#34;,

accept: "請(qǐng)輸入擁有合法后綴名的字符串",

maxlength: jQuery.validator.format("允許的最大長(zhǎng)度為 {0} 個(gè)字符"),

minlength: jQuery.validator.format("允許的最小長(zhǎng)度為 {0} 個(gè)字符"),

rangelength: jQuery.validator.format("允許的長(zhǎng)度為{0}和{1}之間"),

range: jQuery.validator.format("請(qǐng)輸入介于 {0} 和 {1} 之間的值"),

max: jQuery.validator.format("請(qǐng)輸入一個(gè)最大為 {0} 的值"),

min: jQuery.validator.format("請(qǐng)輸入一個(gè)最小為 {0} 的值")

});

個(gè)別表單改變提示內(nèi)容（只對(duì)當(dāng)前表單有效）

方法一：

<input type="file" name="parResource"

class="{required: true, accept: 'zip', messages: {required: '請(qǐng)選擇文件', accept:'請(qǐng)選擇正確的文件'}}">

?

方法二：

$(function() {

$("#testForm").validate({

messages:{

loginName: {

required: "必選字段2"

},

email: {

required: '必選字段22',

email: "請(qǐng)輸入正確格式的電子郵件2"

}

}

});

});

改變錯(cuò)誤消息顯示樣式

指定label.error的樣式就可以了，如下：

<style type="text/css">

label.error{

margin-left: 10px;

color: red;

}

</style>

?

說明：label.error指class為error的label元素，如：<label for="resource" class="error">

擴(kuò)展使用

怎么讓錯(cuò)誤提示信息顯示到指定的位置

validation表單驗(yàn)證插件.doc

?

實(shí)例下載：表單驗(yàn)證

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的Validation-jQuery表单验证插件使用方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。