twitter-bootstrap Bootstrap 4 表单输入，带有用于验证的图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49323175/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 form input with icon for validation
提问by Zim
In Bootstrap 3 there were optional icons for each of the validation states. The icon would appear in the right side of the input using the has-feedback, has-success, has-danger, etc... classes.
在 Bootstrap 3 中，每个验证状态都有可选的图标。该图标会使用出现在输入的右侧has-feedback，has-success，has-danger，等...班。
How can I get this same functionality in Bootstrap 4 using the valid-feedbackor invalid-feedbackclasses?
如何使用valid-feedbackorinvalid-feedback类在 Bootstrap 4 中获得相同的功能？
采纳答案by Zim
Bootstrap 4doesn't include icons (glyphicons are gone), and there are now just 2 validation states (is-validand is-invalid) that control display of the valid-feedbackand invalid-feedbacktext.
Bootstrap 4不包含图标（glyphicons 消失了），现在只有 2 个验证状态（is-valid和is-invalid）来控制valid-feedback和invalid-feedback文本的显示。
With a little extra CSS, you can position an icon inside the input (to the right), and control its' display using is-validor is-invalidon the form-controlinput. Use a font lib like fontawesome for the icons. I created a new feedback-iconclass that you can add to the valid/invalid-feedback.
使用一些额外的 CSS，您可以在输入内（右侧）放置一个图标，并使用is-valid或is-invalid在form-control输入上控制其显示。对图标使用像 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;
}
HTML
HTML
<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 icons
Demo 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>Notice that the containing form-groupis position:relativeusing the position-relativeclass.
请注意，包含form-group正在position:relative使用position-relative该类。
回答by djibe
Form validation icons are built-in Bootstrap 4.3.1, see documentation here : https://getbootstrap.com/docs/4.3/components/forms/#custom-styles
表单验证图标是内置的 Bootstrap 4.3.1，请参阅此处的文档：https: //getbootstrap.com/docs/4.3/components/forms/#custom-styles
For a client-side validation, you can use ParsleyJS plugin. See a demo here : https://jsfiddle.net/djibe89/tu0ap111/
对于客户端验证，您可以使用 ParsleyJS 插件。在此处查看演示：https: //jsfiddle.net/djibe89/tu0ap111/
Fake code
回答by Harshal Lonare
a simple way to do it with bootstrap 4 is:
使用引导程序 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>
obviously you have to include
显然你必须包括
<script src="https://code.iconify.design/1/1.0.4/iconify.min.js"></script>
