Bootstrap 4 表单输入，带有用于验证的图标
Posted
技术标签:
【中文标题】Bootstrap 4 表单输入，带有用于验证的图标【英文标题】：Bootstrap 4 form input with icon for validation 【发布时间】：2018-08-25 15:56:40 【问题描述】：在 Bootstrap 3 中，每个验证状态都有可选图标。该图标将使用has-feedback、has-success、has-danger 等...类出现在输入的右侧。
如何使用 valid-feedback 或 invalid-feedback 类在 Bootstrap 4 中获得相同的功能？
【问题讨论】：
【参考方案1】：Bootstrap 4 不包含图标（字形图标已消失），现在只有 2 个验证状态（is-valid 和 is-invalid）控制 valid-feedback 和 @ 的显示987654326@文字。
使用一点额外的 CSS，您可以在输入端（右侧）放置一个图标，并在 form-control 输入端使用 is-valid 或 is-invalid 控制其显示。对图标使用 fontawesome 之类的字体库。我创建了一个新的feedback-icon 类，您可以将其添加到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>
Demo of input validation iconsDemo with working validation
.valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon
position: absolute;
width: auto;
bottom: 10px;
right: 10px;
margin-top: 0;
<!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>注意包含form-group 是position:relative 使用position-relative 类。
【讨论】：
【参考方案2】：表单验证图标是 Bootstrap 4.3.1 内置的，请参阅此处的文档：https://getbootstrap.com/docs/4.3/components/forms/#custom-styles
对于客户端验证，您可以使用 ParsleyJS 插件。 在此处查看演示：https://jsfiddle.net/djibe89/tu0ap111/
Fake code
【讨论】：
【参考方案3】：使用 bootstrap 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 表单输入，带有用于验证的图标的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4表单验证在使用无效反馈时不起作用，即使输入'is-valid'
如何在 Django 中修改 Bootstrap 4 表单验证信息呈现方式？
带密码确认的引导 4 验证并禁用提交，直到表单验证（注册表单）