使用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

您可以使用上面的答案，但将默认值设置为基础输入。这样，您将向用户展示其输入的外观，还将用空数组来解决问题。

因此，使用某些表现的答案只需修改此部分：

<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>