BootStrap 动态添加验证项和取消验证项的实现方法

当我们使用 Bootstrap 进行表单验证时，我们需要使用其提供的表单验证插件来简化验证开发。Bootstrap 的表单验证插件可以被在 HTML 标记中定义的 data 属性触发，例如 required、pattern 和 minlength。但是我们也需要动态地添加或取消这些验证项。

下面是Bootstrap动态添加验证项的实现方法：

1. 动态添加 required 属性

Bootstrap 中的表单验证插件可以识别 required 属性，并在提交前检查表单输入是否为空。为了动态添加 required 属性，我们可以使用 JavaScript 代码来为要验证的表单元素添加这个属性。例如，下面的示例代码为名为 username 的表单元素添加了 required 属性：

document.getElementById("username").setAttribute("required", "");

1. 动态添加自定义验证规则

使用 Bootstrap 的表单验证插件，我们可以使用 data 属性定义自定义验证规则。例如，在以下示例中，我们可以使用名为 regex 的自定义验证规则：

<input type="text" class="form-control" id="example" name="example" required minlength="6"
   data-regex="^[\w!@#$%^&*()_+\-=\[\]{};':\"\\|,.<>\/?]*$" data-regex-message="只能包含数字、字母和常用符号">

在上面的示例中，我们定义了一个正则表达式来验证输入是否只包含数字、字母和常用符号，并为该输入字段添加了一个自定义的消息，以提示用户出错时可能遇到的问题。

下面是动态添加自定义验证规则的实现方法：

// 为元素添加正则表达式
document.getElementById("example").setAttribute("data-regex", "^\\d{6,8}$");

// 为元素添加自定义消息
document.getElementById("example").setAttribute("data-regex-message", "请输入6到8位数字");

Bootstrap 动态取消验证项的实现方法

在某些情况下，我们可能需要取消某些表单元素的验证。Bootstrap 的表单验证插件在表单元素中使用 novalidate 属性可以禁用验证。例如，在以下示例中，我们禁用了表单中名为 email 的输入字段的验证：

<form action="/submit" method="post" novalidate>
   <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" name="email" readonly>
   </div>
</form>

在上面的示例中，我们为表单添加了 novalidate 属性以禁用验证，以及将 email 输入字段设置为只读以防用户更改这个字段。

除了禁用验证，我们还可以使用 removeAttribute 方法从表单元素中删除验证属性。例如，在以下示例中，我们删除了表单中名为 name 的输入字段的 required 属性，并将该属性从该字段中删除：

document.getElementById("name").removeAttribute("required");

总的来说，Bootstrap 动态添加验证项和取消验证项可以通过 JavaScript 代码来实现。我们可以使用 setAttribute 方法来添加验证属性，而使用 removeAttribute 方法或禁用验证来取消验证项。