首页 Bootstrap5组件手册

<form>
验证方式：
.was-validated           提交前验证
.needs-validation        提交后验证（需添加一段javascript）   

<div>
验证提示：
.valid-feedback          验证正确提示
.invalid-feedback       验证失败提示

<input>
.form-control            文本框样式
placeholder=""           文本框信息
required                 指定验证对象

简单的：
<form action="#" class="was-validated">
  <div>
    <label>用户名:</label>
    <input type="text" class="form-control" name="yhm" placeholder="输入用户名" required/>
  </div>
  <div>
    <label>密码:</label>
    <input type="password" class="form-control" name="mm" placeholder="输入密码" required/>
  </div>
  <input type="submit" class="btn btn-primary"/>
</form>






自定义提示信息：
<form action="#" class="was-validated">
  <div>
    <label for="yhm">用户名:</label>  <!--label[for] 与 input[id]关联，点击辅助，可以不要-->
    <input type="text" class="form-control" id="yhm" name="yhm" placeholder="输入用户名" required/>
    <div class="valid-feedback">验证成功！</div>
    <div class="invalid-feedback">请输入用户名！</div>
  </div>
  <div>
    <label for="mm">密码:</label>
    <input type="password" class="form-control" id="mm" name="mm" placeholder="输入密码" required/>
    <div class="valid-feedback">验证成功！</div>
    <div class="invalid-feedback">请输入密码！</div>
  </div>
  <input type="submit" class="btn btn-primary"/>
</form>

<form action="" class="needs-validation" novalidate>
  <div>
    <label for="yhm">用户名:</label>  <!--label[for] 与 input[id]关联，点击辅助，可以不要-->
    <input type="text" class="form-control" id="yhm" name="yhm" placeholder="输入用户名" required/>
    <div class="valid-feedback">验证成功！</div>
    <div class="invalid-feedback">请输入用户名！</div>
  </div>
  <div>
    <label for="mm">密码:</label>
    <input type="password" class="form-control" id="mm" name="mm" placeholder="输入密码" required/>
    <div class="valid-feedback">验证成功！</div>
    <div class="invalid-feedback">请输入密码！</div>
  </div>
  <input type="submit" class="btn btn-primary"/>
</form>

<script>
// 如果验证不通过禁止提交表单
window.addEventListener('load', function() {
  var forms = document.getElementsByClassName('needs-validation');  // 获取表单验证样式
  var validation = Array.prototype.filter.call(forms, function(form) {  // 循环并禁止提交
    form.addEventListener('submit', function(event) {
      if (form.checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
      }else{
        //做一些格式判断，当然后端做判断保险的多
			
        /*
        如果不合格，阻止提交
        event.preventDefault();   
        event.stopPropagation();
        */
      }
      form.classList.add('was-validated');
    }, false);
  });
}, false);
</script>