在運行中驗證和修改時間輸入

Question

在Javascript中，如何使用正則表達式和string.replace函數驗證和修改用戶時間輸入，以便不是告訴用戶任何東西，它會動態驗證和修改輸入？

例如，用戶輸入可能是1.12p 13:12 1,12PM ，但最終結果應始終是1:12 PM 。

有沒有人有關於如何這樣做的例子？

PS。 我知道使用timepicker是一種更有效的方式，但在這種情況下我必須使用用戶輸入

Answer 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成功

在運行中驗證和修改時間輸入

問題描述

1 個解決方案

解決方案1
1 已采納 2012-10-29 16:33:32

在運行中驗證和修改時間輸入

問題描述

1 個解決方案

解決方案1 1 已采納 2012-10-29 16:33:32

解決方案1
1 已采納 2012-10-29 16:33:32