我已经开始使用Bootstrap,以便在不求助于GWT的情况下实现漂亮的页面设计(后台是用java做的)。
我复制了这个例子作为我的登录界面。现在我想标记一个错误,比如说,用户名是空的。所以我想知道Bootstrap框架在这方面的程序是什么。或者是否有例子显示有错误的表单。
我不确定这个想法是在输入元素里面用红色显示错误信息,还是在输入元素下面显示,或者用一个弹出窗口?
(更新了Bootstrap v4、v3和v3的例子)。
过去几个主要版本的Bootstrap中带有验证类的表单实例。
Bootstrap v4
参见codepen上的实时版本
! bootstrap v4 form validation
<div class="container">
<form>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label text-success">Email</label>
<div class="col-sm-7">
<input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label text-danger">Password</label>
<div class="col-sm-7">
<input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password">
</div>
<div class="col-sm-3">
<small id="passwordHelp" class="text-danger">
Must be 8-20 characters long.
</small>
</div>
</div>
</form>
</div>
Bootstrap v3
请参阅codepen上的实时版本
<form role="form">
<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>
<div class="form-group has-info">
<label class="control-label" for="inputError">Input with info</label>
<input type="text" class="form-control" id="inputError">
<span class="help-block">Username is taken</span>
</div>
<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>
</form>
Bootstrap v2
请参阅jsfiddle上的[实时版本](
).error
、.success
、.warning
和.info
类被附加到.control-group
上。这是标准的Bootstrap标记和v2版的风格设计。只要遵循这一点,你就会有好的结果。当然,如果你愿意,你可以用你自己的样式添加一个弹出窗口或内联Flash,但如果你遵循Bootstrap的惯例,将这些验证类挂在.control-group
上,就会保持一致,易于管理(至少你会继续得到Bootstrap文档和例子的好处)。
<form class="form-horizontal">
<div class="control-group warning">
<label class="control-label" for="inputWarning">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label class="control-label" for="inputError">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group info">
<label class="control-label" for="inputInfo">Input with info</label>
<div class="controls">
<input type="text" id="inputInfo">
<span class="help-inline">Username is taken</span>
</div>
</div>
<div class="control-group success">
<label class="control-label" for="inputSuccess">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
</form>
Bootstrap V3。
<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>
一般来说,在错误发生的地方显示错误是最好的。 例如,如果有人在输入他们的电子邮件时出现错误,你就突出显示电子邮件输入框。
这篇文章有几个很好的例子。 http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/
另外,twitter bootstrap也有一些很好的样式,可以帮助解决这个问题(向下滚动到验证状态部分)。 http://twitter.github.com/bootstrap/base-css.html#forms
突出显示每个输入框是比较复杂的,所以简单的方法是在顶部放一个bootstrap提醒,说明用户做错了什么。 http://twitter.github.com/bootstrap/components.html#alerts