當用戶點擊第 11 個號碼時，如何驗證輸入文本（在 html 中）是否是有效的電話號碼？

Question

我有一個輸入框。 如何同時驗證輸入文本是否是有效的電話號碼，恰好是在用戶點擊輸入中的第 11 個數字時？

這是我到目前為止嘗試過的：

 function validPhone(phoneNum) // check for valid phone numbers in the format 999-999-9999 { var strPhone = phoneNum.value; var rePhone = /\\d{3}-\\d{3}-\\d{4}/; var blnResult = true; if (strPhone.length !== 0 && (strPhone.length !== 12 || strPhone.match(rePhone) == null)) { blnResult = false; phoneNum.select(); alert("Phone number is invalid. Please try again."); phoneNum.focus(); } return blnResult; };

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

Answer 1

您可以使用oninput檢查 input 是否輸入了某些值。

當輸入第 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>