时间戳

首页 > 解决方案 > 当用户在 Bootstrap 4 中键入时检查输入字段的有效性

javascript - 当用户在 Bootstrap 4 中键入时检查输入字段的有效性

问题描述

我想给用户反馈，例如（但不限于）用户类型时电子邮件字段的有效性，即客户端验证。

  <div class="form-group">
    <label for="email">Email</label>
    <div :class="['input-group', validateEmail()]">
        <div class="input-group-prepend">
          <span class="input-group-text"><i class="fa fa-envelope"></i></span>
        </div>
      <input type="text" v-model="email" placeholder="joe@example.org" class="form-control">
    </div>

在用户输入任何内容之前，我希望该字段不着色。当她输入时，大纲变为红色，直到她输入格式正确的电子邮件，此时大纲变为绿色。所有其他输入字段应不受此影响。另一个示例可能是密码字段在满足要求/约束​​时变为绿色。

在 bootstrap 3 中，通过本示例https://codepen.io/CSWApps/pen/MmpBjVhas-error的 javascript 方法将一个或has-success类添加到输入字段非常简单。

然而，似乎在 bootstrap-4 中，随着向 HTML5 伪类的转变:is-valid，:is-invalid它变得更加复杂，因为需要添加was-validated或添加needs-validation到表单标签，以及通过在单个字段上设置这些伪类的难度javascript。我错过了什么吗？有没有一种简单的方法来复制 bootstrap-3 功能？

标签： javascriptbootstrap-4

解决方案

在 Bootstrap 4 中，您可以使用.is-invalidand .is-validclasses on.form-control手动指示表单字段的有效性

https://getbootstrap.com/docs/4.3/components/forms/#server-side

Codepen 演示

推荐阅读