电话号码验证 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>

原文由 Annie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 pattern 属性来使用它。您可以 从此 链接生成模式。

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;
}

在这里 摆弄。

原文由 user379888 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

原文由 max 发布，翻译遵循 CC BY-SA 3.0 许可协议