当用户点击第11个号码时，如何验证输入文本(在html中)是否为有效的电话号码?

Question

我有一个输入

<input id="phoneNumber"/>

如何验证从用户插入的值是一个有效的电话号码或不使用jQuery ?

谢谢。

Answer 1

您可以使用oninput检查输入是否有一些值。

当输入第10个值时，您可以使用alert，但这将不够，因为在alert之后，用户仍然可以输入更多的值。所以使用maxlength="10"只允许10个数字。

如果你不希望text只允许数字，那么你可以使用.replace(/[^d]/, '')来代替任何非数字。并证明它不是一个数字。

function validPhone(phoneNum)
//  check for valid phone numbers in the format 999-999-9999
{
if (phoneNum.value.match(/[^d]/)) {
phoneNum.value = phoneNum.value.replace(/[^d]/, '')
document.querySelector("#demo1").innerHTML = "Sorry numbers only";
} else {
document.querySelector("#demo1").innerHTML = "";
}
var strPhone = phoneNum.value;
var rePhone = /d{3}-d{3}-d{4}/;
if (strPhone.length >= 10) {
phoneNum.select();
document.querySelector("#demo1").innerHTML ="No more numbers plz, only 10 digits allowed in Phone number.";
}
document.querySelector("#demo").innerHTML = strPhone.length;
};

#demo1 {
color: red;
}

<input class="form-control" oninput="validPhone(this)" type="text" name="username" placeholder="Enter Phone number" maxlength="10" id="phoneNumberForForgotPassword" data-val-required="نام کاربری را وارد نمائید.">
<div id="demo1"></div>
<div id="demo"></div>