电话号码验证bootstrap3

Question

我正在尝试在我的网站上创建一个表单，以便人们能够输入电话号码并提交表单。但是当我输入字母而不是数字时，它仍然被接受。我可以使用 Bootstrap 3 检查手机验证吗？

这是我的代码

<footer>
  <hr>
  <div class="container text-center">
    <h3>Subscribe for special offer</h3>
    <p>Enter your information</p>

    <form action="" class="form-inline">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" class="form-control" id="name" placeholder="Name" required="required">
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" class="form-control" id="email" placeholder="Email" required="required">
      </div>
      <div class="form-group">
        <label for="phone_no">Phone Number</label>
        <input type="text" name="num" data-validation="number" data-validation-allowing="negative,number" input name="color" data-validation="number" datavalidation-ignore="$" required="required" class="form-control" id="phone_no" placeholder="Phone Number">

      </div>
      <button type="submit" class="btn btn-default">Subscribe</button>
      <hr>
    </form>
    <!--End form-->

    <hr>

  </div>
  <!--End Container-->

</footer>

Answer 1

您可以通过模式属性来使用它。您可以从 this 链接生成模式。

HTML：

<form>
  <h2>Phone Number Validation</h2>
  <label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br/>
  <input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required >

  <input type="submit" value="Submit">
  <p class="p">Demo by Agbonghama Collins. <a href="http://www.sitepoint.com/client-side-form-validation-html5/">See article</a>.</p>
</form>

CSS：

input[type="tel"] {
  border: 1px solid #ddd;
  padding: 4px 8px;
}
input[type="tel"]:focus {
  border: 1px solid #000;
}

input[type="submit"] {
  font-weight: bold;
  padding: 4px 8px;
  border:1px solid #000;
  background: #3b5998;
  color:#fff;
}

form {
  width: 50%;
  margin: 0 auto;
}

.p {
  padding-top: 30px;
}

小提琴在这里。

Answer 2

Bootstrap 不提供任何表单验证系统。

您可以使用一些小技巧来只允许数字，或者您可以使用可用的 JavaScript 插件之一（例如 http://formvalidation.io/）。

<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required>

Answer 3

    <input type="text" name="num" data-validation="number" 
    data-validation-allowing="negative,number" input name="color" 
    data-validation="number" datavalidation-ignore="$" required="required" class="form-control" 
    id="phone_no" placeholder="Phone Number" maxlength="6" pattern="\d*">

当按钮被点击时，它不会允许它提交，直到它是6位数字和数字。

Answer 4

将

type="text"

更改为

type="number"

。

您也可以使用遮罩：https://igorescobar.github.io/jQuery-Mask-Plugin/

Answer 5

只需尝试电话号码的最小号码和最大号码，它可能会有所不同，具体取决于您所在国家/地区在 Bootstrap 4 和 Bootstrap 5 上的工作情况

<input class="form-control" id="phoneNumber" type="number" min="1000000000" max="9999999999" placeholder="Phone Number"  required />

Answer 6

将类型更改为 tel

<input
              className="form-control"
              id="emergencno"
              name="emergencyNo"
              onChange={handleChange}
              defaultValue={props.updateuser.emergencyNo}
              type="tel"
              maxLength="10"
            />

Answer 7

除了@user379888的解决方案之外，还应该使用 maxlength 和 minlength 属性，因为它显示的唯一错误消息是一个工具提示，显示“匹配模式失败”，如果长度不符合，请使用以下代码向用户发出适当的警告匹配。以下代码显示了无效长度的正确消息，假设您希望表单仅接受 10 位电话号码，并且不允许使用字符，而只能使用数字，不包含任何特殊字符或格式

<form>
<h2>Phone Number Validation</h2>
<label for="phone">Phone Number:</label><br/>
<input id="phone" type="tel" minlength="10" maxlength="10" pattern="^\d{10}$" required >
<input type="submit" value="Submit">
</form>