Question

在Bootstrap 3中，每个验证状态都有可选图标。该图标将显示在输入的右侧，使用has-feedback，has-success，has-danger等等类。

如何使用valid-feedback或invalid-feedback类在Bootstrap 4中获得相同的功能？

Answer 1

Bootstrap 4不包含图标（字形图已经消失），现在只有2个验证状态（is-valid和is-invalid）可以控制valid-feedback和invalid-feedback的显示is-valid文字。

使用一点额外的CSS，您可以在输入内（右侧）放置一个图标，并控制它的＆＃39;在is-invalid输入上使用form-control或feedback-icon进行显示。使用像fontawesome这样的字体库来显示图标。我创建了一个新的valid/invalid-feedback类，您可以将其添加到.valid-feedback.feedback-icon, .invalid-feedback.feedback-icon { position: absolute; width: auto; bottom: 10px; right: 10px; margin-top: 0; }。

<div class="form-group position-relative">
     <label for="input2">Valid with icon</label>
     <input type="text" class="form-control is-valid" id="input2">
     <div class="valid-feedback feedback-icon">
          <i class="fa fa-check"></i>
     </div>
     <div class="invalid-feedback feedback-icon">
          <i class="fa fa-times"></i>
     </div>
</div>

HTML

.valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon {
    position: absolute;
    width: auto;
    bottom: 10px;
    right: 10px;
    margin-top: 0;
}

Demo of input validation icons
Demo with working validation

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <div class="form-group position-relative">
     <label for="input2">Valid with icon</label>
     <input type="text" class="form-control is-valid" id="input2">
     <div class="valid-feedback feedback-icon">
          <i class="fa fa-check"></i>
     </div>
     <div class="invalid-feedback feedback-icon">
          <i class="fa fa-times"></i>
     </div>
   </div>
</div>

＆＃13;

form-group

＆＃13;

请注意，包含position:relative的内容为{{1}}。

Answer 2

表单验证图标是内置的Bootstrap 4.3.1，请参见此处的文档：https://getbootstrap.com/docs/4.3/components/forms/#custom-styles

对于客户端验证，可以使用ParsleyJS插件。在此处查看演示：https://jsfiddle.net/djibe89/tu0ap111/

Fake code

Answer 3

使用引导程序4的一种简单方法是：

<div class="input-group mb-3 border border-success"> 
              <input type="text" class="form-control border-0" aria-label="Amount (to the nearest dollar)">
              <div class="input-group-append">
                <span class="input-group-text bg-white border-0 text-success"><span class="iconify" data-icon="subway:tick" data-inline="true"></span></span>
              </div>
            </div>

很明显，您必须包括

<script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>

Bootstrap 4表单输入带有图标以进行验证

3 个答案: