Question

我在理解建筑验证表格方面遇到了问题。在bootstrap当前文档中有一段JS代码（所谓的入门代码）：

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';

  window.addEventListener('load', function() {
    var form = document.getElementById('needs-validation');
    form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
  }, false);
})();
</script>

它工作正常，但如果我想实施密码检查，我该怎么办？如果我理解它正确Bootstrap有css类：有效和：无效，当字段为空时运行。我想在某些条件（即密码小于8个符号）时触发它们。

<form id="needs-validation" novalidate>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="inputPassword1">Password</label>
            <input type="password" class="form-control" name="inputPassword1" id="pass1" placeholder="password" required>
        <div class="invalid-feedback">
            Please provide a valid password.
        </div>
    </div>
</form>

Answer 1

您可以使用pattern属性。 From MDN：

<强>图案一个正则表达式，用于检查控件的值反对。模式必须匹配整个值，而不仅仅是一些子集。使用title属性来描述模式以帮助用户。当type属性的值为时，此属性适用文本，搜索，电话，网址，电子邮件或密码，否则将被忽略。正则表达式语言与JavaScript RegExp相同算法，使用'u'参数使其将模式视为a unicode代码点序列。图案不被包围正斜线。

例如，以下内容将验证密码至少为8个字符，包括大写，小写和数字：

<form id="needs-validation" novalidate>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="inputPassword1">Password</label>
            <input type="password" class="form-control" name="inputPassword1" id="pass1" placeholder="password" 
                   pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"
                   required>
        <div class="invalid-feedback">
            Passwords should be a minimum of 8 characters and include at least one upper case letter, one lower case letter and one number.
        </div>
    </div>
</form>

使用Bootstrap 4 beta进行表单验证

1 个答案: