jQueryEasyUI ValidateBox 验证框实现验证的方法

首先咱们须要了解ValidateBox验证的几个基本的属性:ui

    名称                                类型                 说明                                                                    默认值
    required                        boolean             定义是否字段应被输入。                                       false
    validType                        string                定义字段的验证类型有默认的也可自定义。             null
    missingMessage             string               当文本框是空时出现的提示文字。                   This field is required.
    invalidMessage               string               当文本框的内容无效时出现的提示文字。                 nullspa

<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: '结束日期不能早于开始日期!'
            }
        })ip

$.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>get

相关文章
相关标签/搜索