bootstrap4 表单验证状态失效

在bootstrap3中，表单验证状态是在输入组件父 div 中添加 .has-warning、.has-error  .has-success 等类，但是在 bootstrap4 中不再生效。

 

如：

<div class="form-group has-success">

    <label class="control-label"for="inputWarning1">Input with warning</label>

    <input type="text" class="form-control" id="inputWarning1">

</div>

 

而在bootstrap4中，应该在输入组件中加入 is-valid 类：

<div class="form-group" id="username-div">
    <label for="username-input">用户名/手机号/邮箱:</label>
    <input type="text" class="form-control is-valid" id="username-input" placeholder="请输入用户名/手机号/邮箱">
</div>

 

映射如下：

has-success --> is-valid

has-warning --> 没有看到

has-error --> is-invalid

 

见官方文档：https://getbootstrap.com/docs/4.0/components/forms/#server-side