我们可以通过使用JavaScript来做到这一点，有一个名为invalid的事件会在每个错误时触发。我们将使用该事件并通过正则表达式检查文本是否是正确的电子邮件。我们将为此创建一个函数。
代码如下：
超文本标记语言

<input type="email" id="input" required>

字符串
JavaScript

const input = document.querySelector('#input');
  
function validation(elem) {
    elem.addEventListener('invalid', function (event) {
        event.preventDefault();
        if (elem.value === '') {
            alert("Fill Your Email");
        } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(elem.value)) {
            alert('Invalid Email');
        } 
    });
}

validation(input);

型
注意：目前仅支持电子邮件输入的验证。

我不知道你用的是什么版本的bootstrap，但bootstrap v5.0可能有你要找的东西。
在html文件中的标题标记之前导入bootstrap v5.0：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

字符串
然后试试这个：

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="validationCustom01" class="form-label">First name</label>
    <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
    <div class="valid-feedback"> Looks good! </div>
  </div>
  <div class="col-md-3">
    <label for="validationCustom02" class="form-label">Last name</label>
    <input type="text" class="form-control" id="validationCustom02" required>
    <div class="invalid-feedback">Please provide a valid Last name.</div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label>
      <div class="invalid-feedback">You must agree before submitting.</div>
    </div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

型

您可以使用novalidate属性作为表单，但它的工作方式与非必填项相同（您的必填项将被忽略）

<form onsubmit="return false" id="form" novalidate>
  <div class="input-group" id="email-input">
   <input type="text" id="email" name="email" autocomplete="off" required placeholder="Email">
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</form>

字符串