正文

Bootstrap中如何设置必填字段的提示与验证

/0 浏览量
1025

在Bootstrap中，你可以利用其内置的表单验证功能来设置必填字段的提示与验证。这个过程主要涉及到以下几个步骤：

1. 引入Bootstrap和jQuery

首先，确保在你的HTML文件中引入了Bootstrap和jQuery。Bootstrap的表单验证依赖于jQuery，所以两者都是必需的。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

2. 创建一个基本的表单

创建一个基本的HTML表单，并给需要验证的字段添加required属性。

<form>
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" class="form-control" id="username" placeholder="请输入用户名" required>
  </div>
  <!-- 其他表单项 -->
  <button type="submit" class="btn btn-primary">提交</button>
</form>

3. 启用Bootstrap表单验证

在表单上添加needs-validation类来启用Bootstrap的表单验证功能。

<form class="needs-validation" novalidate>
  <!-- 表单项 -->
</form>

4. 添加验证提示

你可以通过添加is-invalid类来显示验证错误提示，以及通过添加自定义的HTML来提供更详细的错误信息。

<div class="form-group">
  <label for="username">用户名</label>
  <input type="text" class="form-control" id="username" placeholder="请输入用户名" required>
  <div class="invalid-feedback">
    请填写用户名。
  </div>
</div>

5. 自定义验证样式

Bootstrap提供了一些预定义的类来改变验证信息的样式，例如valid-feedback和invalid-feedback。

<div class="form-group">
  <label for="username">用户名</label>
  <input type="text" class="form-control" id="username" placeholder="请输入用户名" required>
  <div class="valid-feedback">
    用户名看起来不错！
  </div>
  <div class="invalid-feedback">
    请填写用户名。
  </div>
</div>

6. JavaScript验证

Bootstrap使用JavaScript来处理表单验证。当表单提交时，会自动触发验证。你可以通过监听表单的submit事件来添加自定义逻辑。

document.addEventListener('DOMContentLoaded', function () {
  'use strict';
  var forms = document.querySelectorAll('.needs-validation');
  Array.prototype.slice.call(forms).forEach(function (form) {
    form.addEventListener('submit', function (event) {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      }
      form.classList.add('was-validated');
    }, false);
  });
});

通过上述步骤，你就可以在Bootstrap中设置必填字段的提示与验证了。用户在提交表单时，如果必填字段没有填写，Bootstrap会自动显示相应的验证提示信息。

-- 展开阅读全文 --