EasyUI datetimebox多个日期录入框的校验方法!

一、两个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日期框数据大小,顺利解决以上问题

发布了35 篇原创文章 · 获赞 6 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/GJ454221763/article/details/95597711