jQueryEasyUI ValidateBox 驗證框實現驗證的方法

首先咱們須要瞭解ValidateBox驗證的幾個基本的屬性：

    名稱                                類型                 說明                                                                    默認值
    required                        boolean             定義是否字段應被輸入。                                       false
    validType                        string                定義字段的驗證類型有默認的也可自定義。             null
    missingMessage             string               當文本框是空時出現的提示文字。                   This field is required.
    invalidMessage               string               當文本框的內容無效時出現的提示文字。                 null

<div  class="timebox">
        <label><span>開始時間：</span><input id="start" type="text" class="text-whtie ui-datetimebox"  name="search_beginTime"  data-options="prompt:'請選擇開始日期',editable:false,required:'true'"  ></label><br>
        <label style="margin-left: 10px;">
        <span>結束時間：</span>
        <input id="end" type="text" class="text-whtie  ui-datetimebox" name="search_endTime"  data-options="prompt:'請選擇結束日期',editable:false,required:'true',validType:'equaldDate[\'#start\']'"  ></label><br>
    </div>
     <div  class="o2"> 
        <span style="margin-right: 15px;">氧含量(%):</span>  
        <input type="text" name="search_yhl" id="oxygen" value=""  style="width: 100px;" class="text-whtie ui-validatebox" data-options="editable:true,validType:'numberYhl'" /> 
    </div>
    <div  class="o2"> 
        <span style="margin-right: 15px;">身份證:</span>  
        <input type="text" name="search_idcard" id="card" value=""  style="width: 400px;" class="text-whtie ui-validatebox" /> 
    </div>     
    
    <script>
    /*第一種直接在要驗證的驗證框中使用validType屬性定義驗證類型（方法）
        equaldDate  和 numberYhl 已在上邊的input中定義。
    */
        $.extend($.fn.validatebox.defaults.rules, {
            equaldDate: {
                validator: function (value, param) {
                    var d1 = $(param[0]).datetimebox('getValue');  //獲取開始時間
                    return value >= d1;  //有效範圍爲大於開始時間的日期
                },
                message: '結束日期不能早於開始日期!'
            }
        })

$.extend($.fn.validatebox.defaults.rules, {
            numberYhl: {
                validator: function (value, param) {
                    if(value == ''){
                        return true;
                    }else{
                        var reg = /^([1-9]\d?(\.\d{1,2})?|0\.\d{1,2}|100)$/;
                        return reg.test(value);
                    }
                },
                message: '請填寫0-100的數,最多兩位小數'
            }
        })
        /第二種直接經過js獲取屬性，定義要素/
        $(function(){
           $('#card').validatebox({  
              validType:" idcard",
               required: "true",
             });
            $.extend($.fn.validatebox.defaults.rules,{  
                   idcard: {  
                    validator: function(value, param){  
                         return/^\d{15}(\d{2}[A-Za-z0-9])?$/i.test(value);  
                       },  
                       message: '身份證號碼格式不正確'
                   }  
            }); 
        });
        //推薦使用第一種。
        
            $.extend($.fn.validatebox.defaults.rules,{
            類型名稱（方法名）: {  
                            validator: function(value, param){  
                            return boolean;  
                       },  
                       message: 'xxx'
                   }  
                /這是ValidateBox 驗證框實現驗證的固定格式，在這裏寫重寫的驗證其及方法和錯誤信息,
                value 是要驗證的值，param是方法所攜帶的出參數。
                若是function返回的是真則不輸出message，若是false輸出message/
            }); 
</script>