wuxiren123

Web報表工具JS開發之日期校驗

在報表開發過程中，我們常常需要對查詢界面進行日期校驗。例如有兩個參數：開始日期和結束日期，我們要校驗的是：開始日期與結束日期不能為空，結束日期必須在開始日期之后以及結束日期必須在開始日期后的某個時間段內，否則提示相關信息，對此可以在查詢按鈕中增加事件。下面我們通過FineReport來介紹下具體的設置。

具體效果圖如下：

可以看出會報出如下錯誤。

模板的設計工作這邊就不重點講了，設定好如下的模板界面：

給查詢按鈕增加點擊事件，具體的JS代碼如下：

var start = this.options.form.getWidgetByName("starttime").getValue();  
var end = this.options.form.getWidgetByName("endtime").getValue();  
if( start == "" || start==null){  //判斷開始日期是否為空
  alert("錯誤,開始時間不能為空");   //開始日期參數為空時提示
  return false;  
};  
if(end == "" || end==null){  //判斷結束日期是否為空
  alert("錯誤,結束時間不能為空");   //結束日期參數為空時提示
  return false;  
};  
if( start > end){   //判斷開始日期是否大于結束日期
  alert("錯誤,開始時間不能大于結束時間");   //開始日期大于結束日期時提示  
  return false;  
}
var startdate = new Date(start);   //將開始日期轉化為Date型
var enddate = new Date(end);    //將結束日期轉化成Date型
var subdate = (enddate-startdate)/ (1000 *60 *60 *24);   //將兩個日期相減得出的毫秒數轉化為天數
if(subdate>15){    //判斷結束日期是否超過開始日期后15天
alert("錯誤,結束日期必須在開始日期15天之內");    //結束日期超過開始日期后的十五天時提示
return false;
}

雖然在參數控件中也可以設置校驗，但是參數控件要點擊控件后才能進行校驗，因此參數界面的不能為空以及比較校驗需要在查詢按鈕中設置，所以倒不如全放在查詢按鈕中進行校驗。

設置完查看模板，選擇開始時間和結束時間，使這兩個日期之間相差超過15天，就會彈出上述對話框。

因為FineReport的報表界面是在前段展示，我特地把各種瀏覽器試了個遍。剛剛上述的js代碼在火狐，谷歌IE9等瀏覽器下沒有問題，但是在IE8以及IE8以下的IE瀏覽器版本中，判斷兩個日期之間的差值的警告框則不會起作用。可以換用以下代碼：

var start = this.options.form.getWidgetByName("starttime").getValue();    
var end = this.options.form.getWidgetByName("endtime").getValue();    
if( start == "" || start==null){  //判斷開始日期是否為空  
  alert("錯誤,開始時間不能為空");   //開始日期參數為空時提示  
  return false;    
};    
if(end == "" || end==null){  //判斷結束日期是否為空  
  alert("錯誤,結束時間不能為空");   //結束日期參數為空時提示  
  return false;    
};    
if( start > end){   //判斷開始日期是否大于結束日期  
  alert("錯誤,開始時間不能大于結束時間");   //開始日期大于結束日期時提示    
  return false;    
}  
var aDate  =  start.split("-")  
var startdate =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])    //轉換為MM-dd-yyyy格式  
alert(startdate);
var aDate  =  end.split("-")  
var enddate  =  new  Date(aDate[1]  +  '-'  +  aDate[2]  +  '-'  +  aDate[0])  
alert(enddate);
var subdate=  ((enddate  -  startdate)  /1000/  60/60/24)    //把相差的毫秒數轉換為天數  
alert(subdate);
if(subdate>15){    //判斷結束日期是否超過開始日期后15天  
alert("錯誤,結束日期必須在開始日期15天之內");    //結束日期超過開始日期后的十五天時提示  
return false;  
}

posted on 2016-05-11 15:48 喝水居然長肉 閱讀(75) 評論(0)  編輯  收藏