Bootstrap5 表单验证学习笔记

Bootstrap5 提供了表单验证的功能，可以在客户端进行一些简单的数据校验，方便用户提交正确的表单数据。这个功能在实际应用中非常常见，对于提高用户体验和数据质量都有很大作用。以下是一些常见的表单验证方法及实例。

1. 必填项验证

在表单中，有一些项必须填写才能提交表单。这时就需要对这些必填项进行验证。

htmlCopy Code
<form>
  <div class="mb-3">
    <label for="exampleInputName" class="form-label">姓名</label>
    <input type="text" class="form-control" id="exampleInputName" aria-describedby="nameHelp" required>
    <div id="nameHelp" class="form-text">请填写您的真实姓名。</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" required>
    <div id="emailHelp" class="form-text">我们不会分享您的邮箱地址。</div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

在必填项的 input 元素中添加 required 属性即可进行验证。如果用户未填写必填项，提交表单时会提示用户必填项不能为空。

2. 格式验证

有些表单项需要满足一定的格式才能提交，比如邮箱地址、电话号码等。

htmlCopy Code
<form>
  <div class="mb-3">
    <label for="exampleInputEmail2" class="form-label">邮箱地址</label>
    <input type="email" class="form-control" id="exampleInputEmail2" aria-describedby="emailHelp2" required>
    <div id="emailHelp2" class="form-text">请输入有效的邮箱地址。</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputTel" class="form-label">电话号码</label>
    <input type="tel" class="form-control" id="exampleInputTel" aria-describedby="telHelp" pattern="[0-9]{3}-[0-9]{8}|[0-9]{4}-[0-9]{7}">
    <div id="telHelp" class="form-text">请输入正确格式的电话号码（格式：010-12345678 或 0201-1234567）。</div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

在需要进行格式验证的 input 元素中，使用 type 属性指定输入类型，并使用 pattern 属性指定验证格式。如果用户输入的数据不符合规定的格式，提交表单时会提示用户重新输入。

3. 自定义验证

对于一些特定的数据，需要进行自定义验证。Bootstrap5 提供了 data-* 属性来实现自定义验证。

htmlCopy Code
<form>
  <div class="mb-3">
    <label for="exampleInputPwd" class="form-label">密码</label>
    <input type="password" class="form-control" id="exampleInputPwd" aria-describedby="pwdHelp" required data-password>
    <div id="pwdHelp" class="form-text">请输入8-20位字母数字组合的密码。</div>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

在需要进行自定义验证的 input 元素中，使用 data-* 属性来指定验证规则。可以通过 JavaScript 监听表单的 submit 事件，在事件处理函数中获取表单元素的 data-* 属性值，根据特定的验证规则进行验证，并给出相应的提示信息。

以上是 Bootstrap5 表单验证的一些常见方法和实例。通过这些方法，可以方便地对表单数据进行验证，提高表单的数据质量和用户体验。