如何添加 Phone 号码验证并确保用户在我的表单上输入 11 位数字？

Question

我设计了一个带有onclick功能的表单，这个表单的作用是帮助用户验证他们的phone号码是否在我的网站上没有被其他人使用过。

如果他们提供的 phone 号码以前被使用过，他们将收到登录通知。

如果他们的 phone 号码没有被使用，他们将被重定向到下一页。

Phone 我所在国家/地区的数字是 11 位数字，但是，我注意到如果用户输入任意数量的数字，他们仍将被重定向到下一页，而不是收到一条错误消息 “无效的 Phone 数字格式”

如何向我的表单添加 phone 数字验证？确保用户输入 11 位数字？并阻止我的表单重定向，除非用户输入正确的 phone 数字格式？

感谢您的帮助和更正。

下面是我的代码。

/* myScript.js */
function check(form) /*function to check userid & password*/ {
  /*the following code checkes whether the entered userid and password are matching*/
  if (form.usercheck1.value == "1234" ||
    form.usercheck1.value == "12345"
  ) {
    alert("An account already exist with this phone number! \nKindly login to continue.") /*displays error message*/
  } else if (form.usercheck1.value == "" || form.usercheck1.value == null) {
    alert("Please provide your phone number!");
  } else {
    window.location.replace('https://www.google.com')
    /*opens the target page while Id & password matches*/

<link href="https://dl.dropbox.com/s/n2rdyum6kwm7hny/Loginin%20Button%20Animation.css" rel="stylesheet" type="text/css"></link><link href="https://dl.dropbox.com/s/qprekw79zsldo2b/input%20box.css" rel="stylesheet" type="text/css"></link>

<div class="bg-img">
  <div class="separator" style="clear: both; text-align: center;">
    <br /></div>
  <div class="separator" style="clear: both; text-align: center;">
    <img border="0" data-original-height="512" data-original-width="512" height="230" src="https://1.bp.blogspot.com/-EZYNAhXAq1M/YGbnrRsFYeI/AAAAAAAAAMU/6rGjRKv9UvMGn3doDe5_kT1WbOUFZjzUACLcBGAsYHQ/s0/administartor.gif" width="220" /></div>
  <div style="text-align: center;"><span style="font-family: Architects Daughter; font-size: medium;"><b>New Registration</b></span></div>
  <div style="text-align: center;"><span style="color: red; font-family: Courgette;"><b>Check if your phone number has not been used on our platform</b></span></div>
  <div style="text-align: center;"><span style="color: red; font-family: Courgette;"><b>before you proceed.</b></span></div>
  <div style="text-align: center;"><span style="font-family: Architects Daughter; font-size: medium;"><b>Input your phone number below.</b></span></div>
  <div style="text-align: center;">
    <form autocomplete="off" id="formName" name="formName">

      <input class="input5" maxlength="11" id="myform_phone" name="usercheck1" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '');" style="font-family: Courgette;" type="text" placeholder="Phone number here..." />
      <br />
      <center><button class="button" onclick="check(this.form)" type="button" value=""><span>Proceed </span></button></center>
    </form>

Answer 1

您可以在输入 (more here) 上使用 pattern 属性。它指定一个值应该匹配的正则表达式。如果你只想得到 11 个数字，你可以将它设置成这样：

 <input name="usercheck1" pattern="[0-9]{11}" ...rest of your code />

或者您可以将输入类型设置为 number，并将 minlength 和 maxlength 设置为 11。

Answer 2

如何将验证添加到您的 javascript

else if (form.usercheck1.value.length<11 || form.usercheck1.value.length>11) { alert("phone number should be 11 digits!");}

如何添加 Phone 号码验证并确保用户在我的表单上输入 11 位数字？

How Can I Add Phone Number Validation and Make sure Users Input Eleven Digits On My Form?

javascript

forms

validation

onclicklistener