Jquery EasyUI 中ValidateBox驗證框使用講解

來源素文宅博客：http://blog.yoodb.com/

　　Validatebox(驗證框)的設計目的是為了驗證輸入的表單字段是否有效。如果用戶輸入了無效的值，它將會更改輸入框的背景顏色，並且顯示警告圖標和提示信息。該驗證框可以結合form(表單)插件並防止表單重復提交。 使用$.fn.validatebox.defaults重寫默認值對象。

具體用法如下：

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

使用Javascript創建驗證框，具體代碼如下： 

<input id="email" type="text" name="email"/>  
$('#email').validatebox({    
    required: true,    
    validType: 'email'   
});

檢查密碼和確認密碼是否相同，具體代碼如下： 

<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']" />  
 
$.extend($.fn.validatebox.defaults.rules, {    
    equals: {    
        validator: function(value,param){    
            return value == $(param[0]).val();    
        },    
        message: 'Field do not match.'   
    }    
});

輸入框中限制最小長度為5的自定義最小長度驗證，具體代碼如下：

<input class="easyui-validatebox" data-options="validType:'minLength[5]'"> 
$.extend($.fn.validatebox.defaults.rules, {    
    minLength: {    
        validator: function(value, param){    
            return value.length >= param[0];    
        },    
        message: 'Please enter at least {0} characters.'   
    }    
});

驗證規則是根據使用需求和驗證類型屬性來定義的，如下： 

email：匹配E-Mail的正則表達式規則。

url：匹配URL的正則表達式規則。

length[0,100]：允許在x到x之間個字符。

remote['http://.../action.do','paramName']：發送ajax請求需要驗證的值，當成功時返回true。

自定義驗證規則，需要重寫$.fn.validatebox.defaults.rules中定義的驗證器函數和無效消息。

正則表達式參考地址如下：

http://blog.yoodb.com/yoodb/article/detail/306

http://blog.yoodb.com/yoodb/article/detail/308