Jquery validation表單驗證使用方法

2021-09-01 10:06:38 字數 2932 閱讀 6988

[color=darkblue][size=medium]作用

jquery.validate是jquery旗下的乙個驗證框架,借助jquery的優勢,我們可以迅速驗證一些常見的輸入,並且可以自己擴充自己的驗證方法,並且對國際化也有很好的支援。

使用前的布置

說明:需要jquery版本:1.2.6+

步驟:要匯入相應的jquery.js與jquery.validate.js檔案

在相應的字段上指定驗證規則

名稱 *

其中class="required"代表本欄位必須要輸入資料

指定要對表單進行驗證

基礎知識

指定驗證規則的方式

把驗證規則寫到字段元素的class屬性中

例:名稱 * 

密 * 

再次輸入

生日  

e-mail *

par(zip)

說明:如果使用class=""的方式,必須引入:jquery.metadata.js

表單字段的name不能重複,否則所配置的驗證不起作用。

呼叫validate()方法時傳遞欄位的驗證規則

[color=red]$(function() ,

password: ,

password2:

}});

});[/color]

內建的驗證規則

[color=red]required:true

必填字段

remote:"check.php"

使用ajax方法呼叫check.php驗證輸入值

email:true

必須輸入正確格式的電子郵件

url:true

必須輸入正確格式的**

date:true

必須輸入正確格式的日期

dateiso:true

必須輸入正確格式的日期(iso),例如:2010-01-01,2010/01/01 只驗證格式,不驗證有效性

number:true

必須輸入合法的數字(負數,小數)

digits:true

必須輸入整數

creditcard:

必須輸入合法的信用卡號

equalto:"#field"

輸入值必須和$(「#field」)相同

輸入擁有合法字尾名的字串(上傳檔案的字尾),多個字尾之間用』|』隔開

maxlength:5

輸入長度最多是5的字串(漢字算乙個字元)

minlength:3

輸入長度最小是3的字串(漢字算乙個字元)

rangelength:[5,10]

輸入長度必須介於 5 和 10 之間的字串")(漢字算乙個字元)

range:[5,10]

輸入值必須介於 5 和 10 之間

max:5

輸入值不能大於5

min:10

輸入值不能小於10[/color]

說明:remote是遠端驗證:比如註冊驗證使用者名稱是否已被註冊,返回值只能是true(驗證成功)或false(驗證失敗)。在訪問指定的url時,會自動把當前欄位的值做為引數(以欄位name為key)傳遞過去。

某些屬性值中的引號不能省略,否則出錯。如accept、equalto等。

remote使用時遇到的問題:新增使用者時需要驗證使用者名稱是否存在,當新增上乙個使用者後,在不離開該頁面的情況下,再次新增該使用者名稱的使用者,validate不能提示該使用者已存在,因為快取的原因,jquery仍認為該使用者名稱可用。解決方法是在頁面中新增:$().ready(function()); // 關閉快取功能

});新增

修改錯誤資訊提示位置:

修改jquery validate 的錯誤提示位置,把錯誤提示在input內,當獲得滑鼠焦點的時候清楚提示資訊。

具體使用方法:

var validator = $("#mycontainerform").validate(,

rules:

},messages:

}});

自定義驗證規則

除了內建的驗證規則,validation還允許自定義驗證規則。這是通過validation的addmethod()方法實現的,語法 為:

jquery.validator.addmethod("name",function,message)

其中:name為驗證規則的名稱

function定義驗證的規則。引數有?。返回值為?。

message是驗證失敗時的提示資訊。

指定錯誤提示內容

更改預設的提示內容

jquery.extend(jquery.validator.messages, 個字元"),

minlength: jquery.validator.format("允許的最小長度為 個字元"),

rangelength: jquery.validator.format("允許的長度為和之間"),

range: jquery.validator.format("請輸入介於 和 之間的值"),

max: jquery.validator.format("請輸入乙個最大為 的值"),

min: jquery.validator.format("請輸入乙個最小為 的值")

});個別表單改變提示內容(只對當前表單有效)

方法一:

方法二:

$(function() ,

email:

}});

});改變錯誤訊息顯示樣式

指定label.error的樣式就可以了,如下:

說明:label.error指class為error的label元素,如:

擴充套件使用

怎麼讓錯誤提示資訊顯示到指定的位置

validation表單驗證外掛程式.doc[/size][/color]

jquery validation驗證外掛程式

序號規則描述1 required true 必須輸入的字段。2remote check.php 使用 ajax 方法呼叫 check.php 驗證輸入值。3email true 必須輸入正確格式的電子郵件。4url true 必須輸入正確格式的 5date true 必須輸入正確格式的日期。日期校驗...

jquery validation 外掛程式使用

引入jquery.js,jquery.validate.min.js 驗證規則以 data rule 為字首 如果啟用了長度驗證或者值範圍驗證,則必須啟用必填驗證,否則長度與範圍的驗證將不會起作用.表單項中,不要相同name的表單驗證元素,否則只會驗證第乙個name的表單元素 支援的驗證規則有 mi...

jQuery Validation使用教程

1 匯入js庫 jquery validation是基於jquery為核心的,所以必須先導入jquery核心js檔案 接著匯入jquery validation核心js 匯入中文提示資訊js2 預設校驗規則 3 預設提示 messages characters.minlength validator...