JQUERY EASYUI 驗證框(VALIDATEBOX)用法

Query EasyUI 驗證框(ValidateBox)在表單的驗證方面給我們提供了很方便的方法，下面來介紹一下驗證框(ValidateBox)的詳細用法（查看演示）：

HTML 代碼

1. <input id="vv" required="true" validType="email">

然後按照《jQuery EasyUI框架使用文檔》包含必要文件後，只要在$(function(){ }); 裏插入下面的代碼即可：

1. $('#vv').validatebox(options)

下面介紹一下驗證規則：
驗證規則是通過使用屬性 “required”和”validType”來定義的，已經實施的規則如下：

• email: 匹配電子郵件正則表達式規則
• url: 匹配URL正則表達式規則
• length[0,100]: 允許字符串長度的範圍

當然也可以自定義驗證規則，重寫$.fn.validatebox.defaults.rules 可以定義一個校驗器的功能和無效的顯示消息。例如，要定義一個minLength有效的類型：

1. $.extend($.fn.validatebox.defaults.rules, {
2.     minLength: {
3.         validator: function(value, param){
4.             return value.length >= param[0];
5.         },
6.         message: 'Please enter at least {0} characters.'
7.     }
8. });

定義好以後我們就可以使用了，下面的代碼表示輸入的最小長度是5個字符：

1. <input class="easyui-validatebox" validType="minLength[5]">

下面來介紹更多的用法：屬性

屬性名	類型	描述	默認值
required	布爾	定義文本域是否爲必填項	false
validType	字符串	定義字段的驗證類型，比如email, url, etc.	null
missingMessage	字符串	當文本框爲空時提示的文本信息	This field is required.
invalidMessage	字符串	當文本框內容不合法時提示的文本信息	null

方法

方法名	參數	描述
destroy	none	刪除並且銷燬組件
validate	none	做驗證以確定文本框的內容是否是有效的。
isValid	none	調用驗證方法並返回驗證結果，true或者false

演示

注意這裏除了required屬性外,若validType屬性失敗.並不會阻止表單提交..所以我們這裏如果要阻止表單提交

那麼又要利用jquery ui提交的表單方法

具體寫法是

$(":submit").click(function(){
if(!$("#form").form('validate')){
return false;
}
})

#form是<form>表單的ID

轉自http://blog.csdn.net/zouhao619/article/details/6918583