Date and Time Input Validation script written in Javascript

In B/S Program During design, you often need to enter a date or time in an input box and verify whether the input is valid. The common verification method is to perform string verification during submission. If it is a valid date, it will be submitted normally; otherwise, the submission will be canceled and an error message will be given. Alternatively, you can change the date and time input to several drop-down lists. The user selects year, month, day, hour, minute, and second.

A validation script for date and time input written in Javascript is provided here. This script converts a common input box to a date and time input box. You can only enter strings in the date and time format in this input box, rather than any other characters. When you enter invalid characters, it does not bring up the error dialog box responsibly, but completely filters out your input to ensure that the content of your input box is in a valid date and time format.

In fact, you can add other verification functions to the script so that the script can control input in other formats, such as numbers, emails, and user IDs.

Code As follows:
<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 {}) $ /);
If (A = NULL) return false;
If (A [2]> = 13 | A [3]> = 32 | A [4]> = 24 | A [5]> = 60 | [6]> = 60) return false;
Return true;
}
Function isdate (STR ){
VaR A = Str. Match (/^ (\ D {})-(\ D {}) $ /);
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>
Place the above Code on any location on the web page.
Usage:
Date verification box: <input onkeydown = "Validate (this, 1)" value = "0000-00-00">

Time verification box: <input onkeydown = "Validate (this, 2)" value = "00:00:00">

Date and Time verification box: <input onkeydown = "Validate (this, 3)" value = "0000-00-00 00:00:00">

We can test it.
Add the following content to the page:
<Input id = "date" onkeydown = "Validate (this, 3)" value = "0000-00-00 00:00:00">

the server control can input: This. textbox2.text = "0000-00-00";
This. textbox2.attributes. add ("onkeydown", "Validate (this, 1);");
then you can try to enter anything in the input box to see how it works.