jQuery EasyUI 表單插件 - Validatebox 驗(yàn)證框

通過(guò) $.fn.validatebox.defaults 重寫(xiě)默認(rèn)的 defaults。

驗(yàn)證框（validatebox）是為了驗(yàn)證表單輸入字段而設(shè)計(jì)的。如果用戶(hù)輸入無(wú)效的值，它將改變背景顏色，顯示警告圖標(biāo)和提示消息。驗(yàn)證框（validatebox）可與表單（form）插件集成，防止提交無(wú)效的字段。

依賴(lài)

tooltip

用法

從標(biāo)記創(chuàng)建驗(yàn)證框（validatebox）。

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">

使用 javascript 創(chuàng)建驗(yàn)證框（validatebox）。

<input id="vv">

$('#vv').validatebox({
    required: true,
    validType: 'email'
});

檢查密碼和重新輸入密碼是相同的。

// extend the 'equals' rule
$.extend($.fn.validatebox.defaults.rules, {
    equals: {
????????validator: function(value,param){
????????????return value == $(param[0]).val();
????????},
????????message: 'Field do not match.'
    }
});

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
    required="required" validType="equals['#pwd']">

驗(yàn)證規(guī)則

驗(yàn)證規(guī)則是通過(guò)使用 required 和 validType 屬性來(lái)定義的，這里是已經(jīng)實(shí)施的規(guī)則：

email：匹配 email 正則表達(dá)式規(guī)則。
url：匹配 URL 正則表達(dá)式規(guī)則。
length[0,100]：允許從 x 到 y 個(gè)字符。
remote['http://.../action.do','paramName']：發(fā)送 ajax 請(qǐng)求來(lái)驗(yàn)證值，成功時(shí)返回 'true' 。

要自定義驗(yàn)證規(guī)則，重寫(xiě) $.fn.validatebox.defaults.rules，來(lái)定義一個(gè)驗(yàn)證函數(shù)和無(wú)效的信息。例如，定義一個(gè) minLength 驗(yàn)證類(lèi)型：

$.extend($.fn.validatebox.defaults.rules, {
    minLength: {
????????validator: function(value, param){
????????????return value.length >= param[0];
????????},
????????message: 'Please enter at least {0} characters.'
    }
});

現(xiàn)在您可以使用這個(gè) minLength 驗(yàn)證類(lèi)型來(lái)定義一個(gè)至少輸入5個(gè)字符的輸入框：

<input class="easyui-validatebox" data-options="validType:'minLength[5]'">

屬性

名稱(chēng)	類(lèi)型	描述	默認(rèn)值
required	boolean	定義是否字段應(yīng)被輸入。	false
validType	string,array	定義字段的驗(yàn)證類(lèi)型，比如 email、url，等等。可能的值： 1、驗(yàn)證類(lèi)型字符串，應(yīng)用單個(gè)驗(yàn)證規(guī)則。 2、驗(yàn)證類(lèi)型數(shù)組，應(yīng)用多個(gè)驗(yàn)證規(guī)則。單個(gè)字段上的多個(gè)驗(yàn)證規(guī)則自版本 1.3.2 起可用。代碼實(shí)例： <input class="easyui-validatebox" data-options="required:true,validType:'url'"> <input class="easyui-validatebox" data-options=" ????required:true, ????validType:['email','length[0,20]'] ">	null
delay	number	延遲驗(yàn)證最后的輸入值。該屬性自版本 1.3.2 起可用。	200
missingMessage	string	當(dāng)文本框?yàn)榭諘r(shí)出現(xiàn)的提示文本。	該字段是必需的。
invalidMessage	string	當(dāng)文本框的內(nèi)容無(wú)效時(shí)出現(xiàn)的提示文本。	null
tipPosition	string	定義當(dāng)文本框的內(nèi)容無(wú)效時(shí)提示消息的位置。可能的值：'left'、'right'。該屬性自版本 1.3.2 起可用。	right
deltaX	number	在 X 方向的提示偏移。該屬性自版本 1.3.3 起可用。	0
novalidate	boolean	當(dāng)設(shè)置為 true 時(shí)，則禁用驗(yàn)證。該屬性自版本 1.3.4 起可用。	false

方法

名稱(chēng)	參數(shù)	描述
destroy	none	移除并銷(xiāo)毀該組件。
validate	none	進(jìn)行驗(yàn)證以判定文本框的內(nèi)容是否有效。
isValid	none	調(diào)用 validate 方法并且返回驗(yàn)證結(jié)果，true 或者 false。
enableValidation	none	啟用驗(yàn)證。該方法自版本 1.3.4 起可用。
disableValidation	none	禁用驗(yàn)證。該方法自版本 1.3.4 起可用。

jQuery EasyUI 插件其他擴(kuò)展

上一篇：jQuery EasyUI 表單插件 - Form 表單下一篇：jQuery EasyUI 表單插件 - Combo 組合