[英]How to validate if the input text (in html) is a valid Phone Number when user hits the 11th number?
I have an input box.我有一个输入框。 How can I simultaneously validate if the input text is a valid Phone Number, exactly when user hits the 11th number in the input?
如何同时验证输入文本是否是有效的电话号码,恰好是在用户点击输入中的第 11 个数字时?
Here's what I tried so far:这是我到目前为止尝试过的:
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="نام کاربری را وارد نمائید.">
You can use oninput
to check if input has some values entered or not.您可以使用
oninput
检查 input 是否输入了某些值。
When 10th value is entered you can use a alert
but this will not be enough because after alert
, user can still enter more values.当输入第 10 个值时,您可以使用
alert
但这还不够,因为在alert
之后,用户仍然可以输入更多值。 So use maxlength="10"
to allow only 10 numbers.所以使用
maxlength="10"
只允许 10 个数字。
Also if you don't want to allow text
but numbers only than you can use .replace(/[^\\d]/, '')
to replace any non-number .此外,如果您不想只允许
text
而是数字,则可以使用.replace(/[^\\d]/, '')
替换任何非数字。 And show that it is not a number.并表明它不是一个数字。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.