您的位置:首页 > 产品设计 > UI/UE

easyui datebox多条件验证

2015-08-25 15:05 337 查看
页面元素:

<tr>

                        <td class="field">用户名</td>

                        <td>

                            <input name="username" type="text" class="field easyui-validatebox" maxlength="16"

                                data-options="required:true,validType:'fn[system.user.checkUser]',invalidMessage:'用户名已存在!'"/>

                        </td>

                        <td class="field">备注</td>

                        <td>

                           <textarea class="field-remark easyui-validatebox" name="remark"

                                data-options="validType:'length[0,120]',invalidMessage:'不能超过120个字符!'"></textarea>

                        </td>

                    </tr>

                    <tr>

                        <td class="field">密码</td>

                        <td colspan="3">

                            <input id="password" name="password" type="password" class="field easyui-validatebox" maxlength="16"

                                data-options="required:true,validType:'regexp[\'^\\\\w{6,16}$\']',invalidMessage:'密码必须是6-16个字母、数字、下划线!'"/>

                        </td>

                    </tr>

                    <tr>

                        <td class="field">确认密码</td>

                        <td colspan="3">

                            <input type="password" class="field easyui-validatebox" maxlength="16"

                                data-options="required:true,validType:'equals[\'#password\']',invalidMessage:'两次输入密码不一致!'"/>

                        </td>

</tr>

<tr class="hidden">

    <td class="field" >授权开始时间</td>

    <td>

    <input id="validBeginedAt" type="text" style="width:300px" name="validBeginedAt" data-options="validType:'date'"/>

    </td>

    </tr>

    <tr class="hidden">

    <td class="field">授权结束时间</td>

    <td>

    <input id="validEndedAt" type="text" style="width:300px" name="validEndedAt" data-options="validType:'dateQh[\'#validBeginedAt\']'"/>

    </td>
    </tr>

<script type="text/javascript">

//easyui validatebox 规则扩展

    $.extend($.fn.validatebox.defaults.rules, {

    dateQh:{
//日期格式验证.yyyy-MM-dd

    validator:function (value) {
var match=/^(\d{4})-(\d{1,2})-(\d{1,2})$/.test(value);
if(!match) return false;
var month=parseInt(RegExp.$2);
var day=parseInt(RegExp.$3);
return (month>=1 && month<=12) && (day>=1 && day<=31);
}, 
message:'日期格式不正确!',

    validator:function (value,param) {
var startTime2 = $(param[0]).datebox('getValue'); 
   
var d1 = $.fn.datebox.defaults.parser(startTime2); 
   
var d2 = $.fn.datebox.defaults.parser(value); 
   
varify=d2>d1; 
   
return varify;

    }, 

    message:'结束日期要大于开始日期!'

    }
});

$(function() {

    $('#validBeginedAt').datebox({
       required:true
   });
$('#validEndedAt').datebox({
       required:true
   });

    });

</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: