用javascript編寫的日期時間輸入驗證指令碼

在b/s程式設計中，經常需要向一個輸入框輸入日期或時間，並驗證輸入是否有效。通常的驗證方法是在提交的時候進行字串驗證，如果是合法的日期時間則正常提交，否則取消提交並給出錯誤資訊。或者，將日期時間的輸入變成幾個下拉式清單方塊，由使用者選擇年月日時分秒。

這裡給出一個用javascript編寫的日期時間輸入驗證指令碼。這個指令碼可以使一個普通的輸入框變成日期時間輸入框。你只能在這個輸入框裡輸入日期時間格式的字串，而不允許你輸入任何其他的字元。當你輸入非法字元時，它並不是不負責任地彈出錯誤對話方塊，而是完全過濾掉你的輸入以保證你輸入框的內容絕對是合法的日期時間格式。

事實上，你可以向這個指令碼中添加其他驗證函式，讓這個指令碼可以控制其它類型格式的輸入，例如：數字、電子郵件、使用者ID等等。

代碼如下：
<script>
function isTime(str){
var a = str.match(/^(\d{0,2}):(\d{0,2}):(\d{0,2})$/);
if (a == null) return false;
if (a[1]>=24 || a[2]>=60 || a[3]>=60) return false;
return true;
}
function isDateTime(str){
var a = str.match(/^(\d{0,4})-(\d{0,2})-(\d{0,2}) (\d{0,2}):(\d{0,2}):(\d{0,2})$/);
if (a == null) return false;
if ( a[2]>=13 || a[3]>=32 || a[4]>=24 || a[5]>=60 || a[6]>=60) return false;
return true;
}
function isDate(str){
var a = str.match(/^(\d{0,4})-(\d{0,2})-(\d{0,2})$/);
if (a == null) return false;
if ( a[2]>=13 || a[3]>=32 || a[4]>=24) return false;
return true;
}
function validate(obj,type){
var range=obj.createTextRange();
var text = range.text;
var selrange = document.selection.createRange();
var seltext = selrange.text;
var startpos = 0,endpos = 0;
while(selrange.compareEndPoints("StartToStart",range)>0){
selrange.moveStart("character",-1);
startpos ++;
}
while(selrange.compareEndPoints("EndToStart",range)>0){
selrange.moveEnd("character",-1);
endpos ++;
}
if(event.keyCode>=48){
var keytext = String.fromCharCode(event.keyCode);
text = text.substring(0,startpos) + keytext + text.substring(endpos,text.length);
}else if(event.keyCode == 46){//delete
if(startpos == endpos)text = text.substring(0,startpos) + text.substring(startpos+1,text.length);
else text = text.substring(0,startpos) + text.substring(endpos,text.length);
}else if(event.keyCode == 8){
if(startpos == endpos)text = text.substring(0,startpos-1) + text.substring(startpos,text.length);
else text = text.substring(0,startpos) + text.substring(endpos,text.length);
}
if(event.keyCode == 45){
event.returnValue = false;
return;
}
var valid;
switch(type){
case 1:valid = isDate(text);break;
case 2:valid = isTime(text);break;
case 3:valid = isDateTime(text);break;
default:valid = false;
}
if(!valid){
event.returnValue = false;
}
}
</script>
把上面這段代碼放在web頁面的任何位置即可。
使用方法：
日期驗證框：<input onkeyDown="validate(this,1)" value="0000-00-00">

時間驗證框：<input onkeyDown="validate(this,2)" value="00:00:00">

日期時間驗證框：<input onkeyDown="validate(this,3)" value="0000-00-00 00:00:00">

我們可以測試一下。
在頁面上加入以下內容：
<input id="date" onkeyDown="validate(this,3)" value="0000-00-00 00:00:00">

伺服器控制項可以這樣輸入: this.TextBox2.Text = "0000-00-00";
        this.TextBox2.Attributes.Add("onKeyDown", "validate(this,1);");
然後你可以嘗試向這個輸入框內輸入任何內容，看看效果如何吧。