Validation-jQuery 表單驗證插件使用方法 作用jquery.validate 是jquery 旗 下的一個驗證框架，借助jquery 的優(yōu)勢，我們可以迅速驗證一些常見的輸入, 并且可以

Validation-jQuery 表單驗證插件使用方法 作用

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

使用前的布置

說明：需要JQuery 版本：1.2.6

步驟：

要導(dǎo)入相應(yīng)的jQuery.js 與jquery.validate.js 文件

在相應(yīng)的字段上指定驗證規(guī)則

名稱 *

其中class="required"代表本字段必須要輸入數(shù)據(jù)

指定要對表單進行驗證

效果如下圖：

基礎(chǔ)知識

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

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

例：

名稱 *
密 *
再次輸入

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

生日
E-mail *

PAR(zip)

說明：

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

表單字段的name 不能重復(fù)，否則所配置的驗證不起作用。 調(diào)用validate()方法時傳遞字段的驗證規(guī)則 $(function() {

$("#testForm").validate({

rules: {

loginName:{

required: true,

minlength: 2

} ,

password: {

required: true

},

password2: {

equalTo: "input[name=password]"

}

}

});

});

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

說明：

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

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

remote 使用時遇到的問題：添加用戶時需要驗證用戶名是否存在，當(dāng)添加上一個用戶后，在不離開該頁面的情況下，再次添加該用戶名的用戶，validate 不能提示該用戶已存在，因為緩存的原因，jquery 仍認為該用戶名可用。解決方法是在頁面中添加：

$().ready(function(){

$.ajaxSetup ({

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

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

});

添加

修改錯誤信息提示位置：

修改Jquery validate 的錯誤提示位置，把錯誤提示在input 內(nèi)，當(dāng)獲得鼠標(biāo)焦點的時候清楚提示信息。

具體使用方法：

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:{

},

messages: {

}

}); name:{ required:populateErrorMessage($("#errorRequiredMessage").val(), name:{ } required: true $("#containerNameTitle").val()) }

自定義驗證規(guī)則

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

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

其中:

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

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

message 是驗證失敗時的提示信息。

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

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

jQuery.extend(jQuery.validator.messages, {

required: "必填字段",

remote: "請指定一個不重復(fù)的值",

email: "請輸入正確格式的電子郵件",

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

date: "請輸入合法的日期",

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

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

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

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} 的值") });

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

方法一：

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

方法二：

$(function() {

$("#testForm").validate({

messages:{

loginName: {

required: "必選字段2"

},

email: {

required: '必選字段22',

email: "請輸入正確格式的電子郵件2"

}

}

});

});

改變錯誤消息顯示樣式

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

說明：label.error 指class 為error 的label 元素，如：

擴展使用

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

Ad:

購買域名空間請選擇美橙互聯(lián)頂級代理——七天美橙（http://mc.qitianit.com） 美橙互聯(lián)產(chǎn)品5折。域名55元。

特價優(yōu)惠產(chǎn)品——美橙互聯(lián)免備案香港空間僅需100元

速度飛快，測速網(wǎng)址：