5

在 Javascript 中，如何使用正则表达式和string.replace函数验证和修改用户时间输入，以便它不会告诉用户任何内容，而是即时验证和修改输入？

例如，用户输入可能是1.12p 13:12 1,12PM，但最终结果应该始终是1:12 PM。

有没有人有如何做到这一点的例子？

PS。我知道使用 timepicker 是一种更有效的方式，但在这种情况下我必须使用用户输入

4

1 回答 1

1

您可以使用一个简单的正则表达式作为起点：

(\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 成功

于 2012-10-29T16:33:32.437 回答