Question

我正在尝试第一次在服务器端验证引导程序表单，我不太了解何时使用is-valid和is-invalid类。另外，在文档中，我仍然不清楚是否应该使用脚本，因为“服务器端”部分的代码中没有显示该脚本。

在测试文档代码时，我觉得很奇怪，您可以在有效的文本字段中提交一个空文本，并且仍然显示“ Looks Good”。

我要验证的表单是此表单的较大版本。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

      <form>
          <div class="form-row">
            <div class="col-md-4 mb-3">
              <label for="validationServer01">First name</label>
              <input type="text" class="form-control is-valid " id="validationServer01" placeholder="First name" value="Mark" required>
              <div class="invalid-feedback">
                Crap!
              </div>
              <div class="valid-feedback">
                  Looking good
                </div>
            </div>
          </div>
          <button class="btn btn-primary" type="submit">Submit form</button>
        </form>

              <script>
              // Example starter JavaScript for disabling form submissions if there are invalid fields
              (function() {
                'use strict';
                window.addEventListener('load', function() {
                  // Fetch all the forms we want to apply custom Bootstrap validation styles to
                  var forms = document.getElementsByClassName('needs-validation');
                  // Loop over them and prevent submission
                  var validation = Array.prototype.filter.call(forms, function(form) {
                    form.addEventListener('submit', function(event) {
                      if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                      }
                      form.classList.add('was-validated');
                    }, false);
                  });
                }, false);
              })();
              </script>

还可以在不显示标准浏览器验证的情况下执行任何操作吗？

Bootstrap 4服务器端表单验证。何时使用is-valid和is-invalid？

0 个答案: