一、两个datetimebox日期录入框间的校验【一个日期大于另外一个日期】
目的:有若干个(24个)datetimebox日期选择框,要进行日期校验【前边的日期要小于后面的日期】若有不符合的日期数据不进行保存。大致计算了下25个日期框,每个都要进行校验,第一个需要校验23次,第二个需要22次。。。直到最后共300次;若每个都要写单个的js校验,想想都头大了。
html:
<td class="td0">开始时间:</td>
<td><input class="easyui-datetimebox" id="start" name="start"/></td>
<td class="td0">结束时间:</td>
<td><input validType="TimeCheck['start']" invalidMessage="结束时间应大于开始时间!" class="easyui-datetimebox" id="end" name="end"/></td>
js:
<script type="text/javascript">
$(function(){
$.extend($.fn.validatebox.defaults.rules,{
TimeCheck:{
validator:function(value,param){
var s = $("input[name="+param[0]+"]").val();
return value>=s;
},
message:'非法数据'
}
});
});
</script>
此方法为网上查找,可使用于数量较少的datetimebox日期选择框,
缺点:必须顺序录入有效(必须先录入开始时间,然后录入结束时间后才会触发校验;反之无效,但在form表单提交时会以false状态展示,无法正常提交)
二、自定义js方法进行多datetimebox日期校验
html:
<td class="td0" >搬开时间:</td>
<td><input class="easyui-datetimebox validate1" id="banStart" name="banStart"/></td>
<td class="td0" >搬结时间:</td>
<td><input class="easyui-datetimebox validate2" id="banEnd" name="banEnd"/></td>
<td class="td0" >安开时间:</td>
<td><input class="easyui-datetimebox validate3" id="anStart" name="anStart"/></td>
<td class="td0" >安结时间:</td>
<td><input class="easyui-datetimebox validate4" id="anEnd" name="anEnd"/></td>
<td class="td0">一开时间:</td>
<td><input class="easyui-datetimebox validate5" id="yiStart" name="yiStart"/></td>
<td class="td0">一完时间:</td>
<td><input class="easyui-datetimebox validate6" id="yiEnd" name="yiEnd" /></td>
<td class="td0">二开时间:</td>
<td><input class="easyui-datetimebox validate7" id="erStart" name="erStart"/></td>
<td class="td0">二完时间:</td>
<td><input class="easyui-datetimebox validate8" id="erEnd" name="erEnd"/></td>
......
<td class="td0">n开时间:</td>
<td><input class="easyui-datetimebox validate8" id="nStart" name="nStart"/></td>
<td class="td0">n完时间:</td>
<td><input class="easyui-datetimebox validate8" id="nEnd" name="nEnd"/></td>
js:
<script type="text/javascript">
//时间段比较
function compareDates(posi1,posi2,text1,text2){
$("#"+posi2).datetimebox({
onChange:function(time){
var date1=$("#"+posi1).datetimebox('getValue');
if(date1 > time){
$.messager.alert('提示信息',text2+"应大于"+text1+",请重新入!","info");
}
}
});
}
$(function(){
compareDates("banStart","banEnd","搬开时间","搬结时间");
compareDates("banEnd","anStart","搬结时间","安开时间");
compareDates("anStart","anEnd","安开时间","安结时间");
compareDates("anEnd","yiStart","安结束时间","一开时间");
compareDates("yiStart","yiEnd","一开时间","一完时间");
compareDates("yiEnd","erKaiStart","一完时间","二开时间");
compareDates("erStart","erEnd","二开时间","二完时间");
......
compareDates("nStart","nEnd","n开时间","n完时间");
});
</script>
此方法和上述类似,也必须严格按照顺序进行校验,即先后顺序
苦思冥想,EasyUI提供的API所述方法也是在太少,所提供方法仅在控件上有效,且不适用与多datetimebox日期控件
难道真的没有好的办法了吗
既然在控件上找不到合适的方法,为什么不改变一种思路
请往下看:
三、datetimebox事件触发数据校验
html:
<td class="td0" >搬开时间:</td>
<td><input class="easyui-datetimebox validate1" id="banStart" name="banStart"/></td>
<td class="td0" >搬结时间:</td>
<td><input class="easyui-datetimebox validate2" id="banEnd" name="banEnd"/></td>
<td class="td0" >安开时间:</td>
<td><input class="easyui-datetimebox validate3" id="anStart" name="anStart"/></td>
<td class="td0" >安结时间:</td>
<td><input class="easyui-datetimebox validate4" id="anEnd" name="anEnd"/></td>
<td class="td0">一开时间:</td>
<td><input class="easyui-datetimebox validate5" id="yiStart" name="yiStart"/></td>
<td class="td0">一完时间:</td>
<td><input class="easyui-datetimebox validate6" id="yiEnd" name="yiEnd" /></td>
<td class="td0">二开时间:</td>
<td><input class="easyui-datetimebox validate7" id="erStart" name="erStart"/></td>
<td class="td0">二完时间:</td>
<td><input class="easyui-datetimebox validate8" id="erEnd" name="erEnd"/></td>
......
<td class="td0">n开时间:</td>
<td><input class="easyui-datetimebox validate(n-1)" id="nStart" name="nStart"/></td>
<td class="td0">n完时间:</td>
<td><input class="easyui-datetimebox validate(n)" id="nEnd" name="nEnd"/></td>
js:
//保存数据
function save(){
var compareRecord=0;
var gx=['','搬开时间','搬结时间','安开时间','安结时间','一开时间','一完时间','二开时 间','二完时间',.......,'完工时间','交付时间'];
//各个日期校验 validate21
for(var n=1;n<=21;n++){
//当前日期值
var dqDate=$(".validate"+n).datetimebox('getValue');
for(var m=n+1;m<=21;m++){
//当前值之后的日期值
var varDate=$(".validate"+m).datetimebox('getValue');
//判断当前值是否小于后面值
if(dqDate > varDate && varDate != '' && dqDate != ''){
compareRecord=1;
$.messager.alert('提示信息', 'gx[m]+'录入有误!', 'info');
return;
}
}
if(compareRecord == 0 && n == 21){
//保存程序
......
}
}
}
以上思路从另外一个角度去校验datetimebox日期框数据大小,顺利解决以上问题