在 Javascript 中,如何使用正则表达式和string.replace
函数验证和修改用户时间输入,以便它不会告诉用户任何内容,而是即时验证和修改输入?
例如,用户输入可能是1.12p
13:12
1,12PM
,但最终结果应该始终是1:12 PM
。
有没有人有如何做到这一点的例子?
PS。我知道使用 timepicker 是一种更有效的方式,但在这种情况下我必须使用用户输入
在 Javascript 中,如何使用正则表达式和string.replace
函数验证和修改用户时间输入,以便它不会告诉用户任何内容,而是即时验证和修改输入?
例如,用户输入可能是1.12p
13:12
1,12PM
,但最终结果应该始终是1:12 PM
。
有没有人有如何做到这一点的例子?
PS。我知道使用 timepicker 是一种更有效的方式,但在这种情况下我必须使用用户输入
您可以使用一个简单的正则表达式作为起点:
(\d{1,2})\s*[.,:;]\s*(\d{1,2})\s*(([Aa]|[Pp])[Mm]?)?
^ ^ ^ ^ ^ ^ ^ ^ ^
Hour group | | Minutes | | | M is optional
| Valid separators | | Case-insensitivity
| | | AM/PM group
------------------------------Allow spaces
您仍然需要验证时间是否有效(59:99 可能无效),但这至少可以更容易地在 javascript 中解析字符串。解析后,您可以根据需要将其打印回来。
编辑:哎呀。忘记了 javascript 不支持命名组。只需使用编号组来达到相同的效果。
示例
干草...这是一个完整的工作示例。何时验证(以及如何处理无效输入)由您决定:
<html>
<head>
<script>
function parseTime( timeString ){
var timePattern = /(\d{1,2})\s*[.,:;]\s*(\d{1,2})\s*(([Aa]|[Pp])[Mm]?)?/;
var timeMatch = timePattern.exec( timeString );
var INVALID = null;
if ( timeMatch !== null ){
var hour = timeMatch[1];
var minute = timeMatch[2];
var ampm = timeMatch[3];
if ( minute < 0 || minute > 59 )
return INVALID;
if ( ampm != "" ){
if ( hour < 1 || hour > 12 )
return INVALID;
ampm = ampm.substring(0,1).toUpperCase() == "A" ? "AM" : "PM";
} else {
if ( hour > 23 )
return INVALID;
ampm = ( hour < 13 ? "AM" : "PM" );
hour = hour % 12;
if ( hour == 0 ) hour = 12;
}
return hour + ":" + minute + " " + ampm;
} else {
return INVALID;
}
}
function unitTest(){
var testStrings = [
["1:30 PM", "1:30 PM"],
["1.30p", "1:30 PM"],
["1;30a", "1:30 AM"],
["59:99 PM", null],
["0,30", "12:30 AM"],
["15:00", "3:00 PM"],
["abc", null] ];
var testResults;
testResults = "<table><tr><th>Input</th><th>Expected</th><th>Actual</th></tr>";
for (var i = 0; i < testStrings.length; i++){
testResults +=
"<tr>" +
"<td>" + testStrings[i][0] + "</td>" +
"<td>" + testStrings[i][1] + "</td>" +
"<td>" + parseTime( testStrings[i][0] ) + "</td>" +
"<td>" + ( testStrings[i][1] == parseTime( testStrings[i][0] ) ?
"<span style='color:green'>Success</span>" :
"<span style='color:red'>Failure</span>" ) +
"</td>" +
"</tr>";
}
testResults += "</table>";
this.document.getElementById("results").innerHTML = testResults;
}
</script>
</head>
<body onload="unitTest();">
<div id="results">
</div>
</body>
</html>
输出:
输入 预期 实际
1:30 PM 1:30 PM 1:30 PM 成功
1.30p 1:30 PM 1:30 PM 成功
1;30a 1:30 AM 1:30 AM 成功
59:99 PM null null 成功
0,30 12 :30 AM 12:30 AM 成功
15:00 3:00 PM 3:00 PM 成功
abc null null 成功