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

Validation-jQuery 表單驗(yàn)證插件使用方法 作用

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

使用前的布置

說明：需要JQuery 版本：1.2.6

步驟：

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

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

名稱 *

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

指定要對(duì)表單進(jìn)行驗(yàn)證

效果如下圖：

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

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

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

例：

名稱 *
密 *
再次輸入

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

生日
E-mail *

PAR(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ī)則

說明：

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è)用戶后，在不離開該頁(yè)面的情況下，再次添加該用戶名的用戶，validate 不能提示該用戶已存在，因?yàn)榫彺娴脑?，jquery 仍認(rèn)為該用戶名可用。解決方法是在頁(yè)面中添加：

$().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:{

},

messages: {

}

}); name:{ required:populateErrorMessage($("#errorRequiredMessage").val(), name:{ } required: true $("#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)俅屋斎胂嗤闹?,

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)前表單有效）

方法一：

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 的樣式就可以了，如下：

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

擴(kuò)展使用

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

Ad:

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

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

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