bootstrap4 表单验证状态失效

最新推荐文章于 2026-05-15 07:58:53 发布

原创最新推荐文章于 2026-05-15 07:58:53 发布 · 4.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍从Bootstrap3到Bootstrap4的表单验证状态变化，详细解释了如何在Bootstrap4中使用is-valid和is-invalid类进行表单状态显示，以及与Bootstrap3的不同之处。

在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