使用Bootstrap在表单中标记错误

作者: 圈圈红
发布时间: 2024-06-19 02:34:55 (24天前)
转自：

6 条回复

0#
回复此人
VIP | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 通常在错误发生的位置附近显示错误是最好的。即如果有人在输入电子邮件时出错，请突出显示电子邮件输入框。 </p> <P> 这篇文章有几个很好的例子。 <a href="http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/" rel="nofollow"> http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/ </A> </p> <P> twitter bootstrap也有一些不错的样式，可以帮助解决这个问题（向下滚动到Validation states部分） <a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="nofollow"> http://twitter.github.com/bootstrap/base-css.html#forms </A> </p> <P> 突出显示每个输入框有点复杂，因此最简单的方法是在顶部放置一个引导警报，并提供用户错误的详细信息。 <a href="http://twitter.github.com/bootstrap/components.html#alerts" rel="nofollow"> http://twitter.github.com/bootstrap/components.html#alerts </A> </p> </DIV>

编辑
1#
回复此人
polo | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 对于Bootstrap v4使用： <BR/> <code> has-danger </code> 对于 <code> form-group </code> 包装， <BR/> <code> form-control-danger </code> 输入显示图标（在输入结束时显示鉁鉁）， <BR/> <code> form-control-feedback </code> 消息包装器 </p> <P> 例： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <div class="form-group has-danger"> <input type="text" class="form-control form-control-danger"> <div class="form-control-feedback">Not valid :(</div> </div> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
2#
回复此人
Colin | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在使用bootstrap模态类（v 3.3.7）时，也可以使用以下类... help-inline和help-block在模态中不起作用。 </p> <pre> <code> <span class="error text-danger">Some Errors related to something</span> </code> </pre> <P> 输出如下所示： </p> <P> <a href="https://i.stack.imgur.com/BQQeO.png" rel="noreferrer"> <img src =“https://i.stack.imgur.com/BQQeO.png”alt =“模态中的错误文本示例”/> </A> </p> </DIV>

编辑
3#
回复此人
青阳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> Bootstrap V3 </强> ： </p> <P> <a href="http://getbootstrap.com/css/#forms-control-validation" rel="noreferrer"> 官方文件链接1 </A> <BR/> <a href="http://getbootstrap.com/css/#forms-help-text" rel="noreferrer"> 官方Doc Link 2 </A> </p> <pre> <code> <div class="form-group has-success"> <label class="control-label" for="inputSuccess">Input with success</label> <input type="text" class="form-control" id="inputSuccess" /> <span class="help-block">Woohoo!</span> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning">Input with warning</label> <input type="text" class="form-control" id="inputWarning"> <span class="help-block">Something may have gone wrong</span> </div> <div class="form-group has-error"> <label class="control-label" for="inputError">Input with error</label> <input type="text" class="form-control" id="inputError"> <span class="help-block">Please correct the error</span> </div> </code> </pre> </DIV>

编辑
4#
回复此人
尼拉。 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 可以使用CSS仅在出错时显示错误消息。 </p> <pre> <code> .form-group.has-error .help-block { display: block; } .form-group .help-block { display: none; } <div class="form-group has-error"> <label class="control-label" for="inputError">Input with error</label> <input type="text" class="form-control" id="inputError"> <span class="help-block">Please correct the error</span> </div> </code> </pre> </DIV>

编辑

登录后才能参与评论