使用 Javascript 驗證 10 位電話號碼

Question

我有一些 Javascript 代碼試圖驗證輸入的電話號碼實際上由 10 位數字組成，無論格式如何。 它似乎不起作用。

我使用了類似的 Javascript 代碼來驗證電子郵件地址條目，並且奏效了。

這是電話號碼的 HTML 和 JS：

電話號碼

            <input type="text" name="phone number" id="phone_number" oninput="return validate_number()"><br><br>
            <script>
                var number = document.getElementById("phone_number");
                function validateNumber(val) {
                    var re = /^\d{3}-\d{3}-\d{4}$/;
                    console.log(re.test(val))
                    return re.test(val);
                }

                function validate_number() {
                    if (validateNumber(number.value.replace(/\D/g,""))) {
                        document.getElementById("phone_number_valid").style.visibility = "visible";
                        document.getElementById("phone_number_valid").style.height = "initial";
                        document.getElementById("phone_number_invalid").style.visibility = "hidden";
                        document.getElementById("phone_number_invalid").style.height = "0";
                    } else {
                        document.getElementById("phone_number_invalid").style.visibility = "visible";
                        document.getElementById("phone_number_invalid").style.height = "initial";
                        document.getElementById("phone_number_valid").style.visibility = "hidden";
                        document.getElementById("phone_number_valid").style.height = "0";
                    }
            </script>
            <div id="phone_number_invalid" class="error_verify">
                <p style="color:red">Invalid phone number.</p>
            </div>
            <div id="phone_number_valid" class="error_verify">
                <p style="color:green">Valid phone number.</p>
            </div>

這是相關的CSS：

.error_verify {
    visibility: hidden;
    height:0;
}

Answer 1

您使用輸入調用validateNumber ，並刪除所有非數字字符：

if (validateNumber(number.value.replace(/\D/g,""))) {

因此，包含破折號的正則表達式肯定不匹配：

var re = /^\d{3}-\d{3}-\d{4}$/;

由於您根本不關心格式，聽起來您只需要檢查電話號碼中是否正好有 10 位數字。 要么將您的正則表達式更改為僅 10 位數字：

var re = /^\d{10}$/;

或者，更簡單，只需檢查數字字符數是否為 10：

if (number.value.match(/\d/g).length === 10)) {

 const numInput = document.getElementById("phone_number"); const validDiv = document.querySelector('#phone_number_valid'); const invalidDiv = document.querySelector('#phone_number_invalid'); function validate_number() { if ((numInput.value.match(/\\d/g) || []).length === 10) { validDiv.style.visibility = "visible"; validDiv.style.height = "initial"; invalidDiv.style.visibility = "hidden"; invalidDiv.style.height = "0"; } else { invalidDiv.style.visibility = "visible"; invalidDiv.style.height = "initial"; validDiv.style.visibility = "hidden"; validDiv.style.height = "0"; } }

 <input type="text" name="phone number" id="phone_number" oninput="return validate_number()"><br><br> <div id="phone_number_invalid" class="error_verify"> <p style="color:red">Invalid phone number.</p> </div> <div id="phone_number_valid" class="error_verify"> <p style="color:green">Valid phone number.</p> </div>

Answer 2

您可以使用上面的答案，但將輸入的默認值設置為基礎。 通過這種方式，您將向用戶展示他們的輸入應該是什么樣子，並且還將解決空數組的問題。

所以使用CertainPerformance的答案只是修改這部分：

<input type="text" name="phone number" id="phone_number" oninput="return validate_number()"><br><br>

看起來像這樣：

<input type="text" name="phone number" id="phone_number" oninput="return validate_number()" value="1234567890"><br><br>