当用户点击第 11 个号码时，如何验证输入文本（在 html 中）是不是是有效的电话号码？

Posted 2023-05-08

【中文标题】当用户点击第 11 个号码时，如何验证输入文本（在 html 中）是不是是有效的电话号码？

【英文标题】：How to validate if the input text (in html) is a valid Phone Number when user hits the 11th number?当用户点击第 11 个号码时，如何验证输入文本（在 html 中）是否是有效的电话号码？

【发布时间】：2021-12-11 17:15:56

【问题描述】：

我有意见。

<input id="phoneNumber"/>

如何验证来自用户的插入值是否是有效的电话号码或不使用 jQuery？

谢谢。

【问题讨论】：

使用一些代码并通过提供一些代码来了解您尝试了多远并遇到了问题

您可以直接在输入标签中执行此操作，如下所示。 ``` 字符数：5 ``` 然后使用一些使用 JS 进行 UI 验证。按照这个逻辑，如果所有的输入都有它们的要求，那么这个按钮是可点击的，否则它不是。祝你好运

@TomasMota 当你有提交按钮时它很有用，但在我的情况下没有

那你就不需要那个逻辑了。只需将其添加到您的输入标签中，它就应该按照您的意愿行事，对吧？或者这不是您想要的？

@TomasMota 不是我要找的东西，我想要在用户插入数字时验证的东西

【参考方案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 = /\d3-\d3-\d4/;

  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>