重要：bootstrap表格自带js验证validation同时通过ajax提交

---

bootstrap 5 自带form的validation功能。

首先要实现验证的前提是设置input属性为required。通过添加form两个class来实现自带的验证，一个是needs-validation 还有一个是was-validated。第一个是提交后验证，第一个是提交前验证。任何一个class布置到form的class里，同时要添加novalidated属性，这个属性可以避免html5自带的required验证，代码如下：

<form class="form-horizontal was-validated" novalidate id="domainForm">

如果是要实现submit提交后的验证，也就是needs-validation，要添加一段js到文件:

(() => {
  'use strict'

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  const forms = document.querySelectorAll('.needs-validation')

  // Loop over them and prevent submission
  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)
  })
})()

验证主要是通过添加feedback体现在文字上的，feedback通常都添加在input后面：

<div class="col-3">
                    <input type="text" required class="form-control" id="name" name="name" pattern="^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$" placeholder="Domain Name">
                    <div class="invalid-feedback">
                      Please choose a username.
                    </div>
                </div>

自带的验证还可以实现html5 pattern的验证，比方说可以实现域名类的输入的验证，可以实现密码的输入形式复杂性。html5 patter的网站：https://www.html5pattern.com/

如果是ajax提交的form， bootstrap form的验证阻止不了ajax， 所以需要在ajax提交之前添加代码：

首先要阻止默认的提交：e.preventDefault();

    e.preventDefault();
    if (!document.getElementById("domainForm").checkValidity()) {
        
        console.log('the form is not validated');
      return false;
    }

注意这里的return false非常关键，阻止了后面的ajax的动作。然后后面可以提交ajax到php实现后面的操作。

jquery版本的js验证：

if (！$("#register-form")[0].checkValidity()) {  return false; }

简单来说就是先添加was-validated class到form的class,然后设置需要验证的input添加required属性。然后在input下面添加invalid-feedback或者valid-feedback，然后添加pattern到input里面定制自己的样式，然后在ajax前面添加！document.getElementById(“domainForm”).checkValidity() 验证 通过return false来实现阻止后面的动作的提交。

如果不加bootstrap的验证用html自带的验证也可以，那就不用在form上添加was-validated这种，但是checkValidity函数依然会起作用，上面js验证form是否正确的方式依然有用。

---