我已经开始使用Bootstrap来实现一个漂亮的页面设计，而不诉诸GWT(后端是用java制作的)
对于我的登录屏幕，我复制了这个例子。现在我想要标记一个错误，例如，用户名是空的。我想知道Bootstrap框架中的过程是什么。或者如果有例子显示表单有错误。
我不确定这个想法是在输入元素中用红色显示错误消息，还是在输入元素下面显示它，或者可能用一个弹出框?
一般来说，在错误发生的地方附近显示错误是最好的。例如，如果有人在输入电子邮件时出错，你可以突出显示电子邮件输入框。
本文有两个很好的例子。 http://uxdesign.smashingmagazine.com/2011/05/27/getting-started-with-defensive-web-design/
此外，twitter bootstrap有一些很好的样式来帮助这一点(向下滚动到验证状态部分) http://twitter.github.com/bootstrap/base-css.html#forms
突出显示每个输入框有点复杂，所以简单的方法是在顶部放置引导提醒，详细说明用户做错了什么。 http://twitter.github.com/bootstrap/components.html#alerts
(更新了Bootstrap v4, v3和v3的示例)
Bootstrap过去几个主要版本的带有验证类的表单示例。
引导v4
在codepen上查看实时版本
<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>
引导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>
引导v2
在jsfiddle上查看实时版本
.error， .success， .warning和.info类被追加到.control-group。这是v2中标准的Bootstrap标记和样式。只要照着做，你的身材就会很好。当然，如果你喜欢的话，你可以用自己的样式添加一个弹出式或“内联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>
引导V3:
官方文档链接1 官方文件链接2
<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>
你也可以使用下面的类，同时使用bootstrap模态类(v 3.3.7)…联机帮助和帮助块在模态中不起作用。
<span class="error text-danger">Some Errors related to something</span>
输出如下所示:
对于Bootstrap v4使用: 表单组包装有危险， Form-control-danger for input显示图标(将在输入结束时显示控制面板)， 表单-控制-反馈到消息包装器
例子:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="匿名"> < span class=" font - family -宋体"> <input type="text" class="form-control form-control-danger"> <div class="form-control-feedback">无效:(</div> < / div >
可以使用CSS仅在错误时显示错误消息。
.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>
引导V3:
一旦我在搜索laravel功能，我就知道了这个惊人的表单验证。后来，我修改了象形文字图标功能。现在，它看起来很棒。
<div class="col-md-12">
<div class="form-group has-error has-feedback">
<input id="enter email" name="email" type="text" placeholder="Enter email" class="form-control ">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
<span class="help-block"><p>The Email field is required.</p></span>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-6">
<div class="form-group has-error has-feedback">
<input id="account_holder_name" name="name" type="text" placeholder="Name" class="form-control ">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
<span class="help-block"><p>The Name field is required.</p></span>
</div>
</div>
<div class="col-md-6">
<div class="form-group has-error has-feedback">
<input id="check_np" name="check_no" type="text" placeholder="Check no" class="form-control ">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
<span class="help-block"><p>The Check No. field is required.</p></span>
</div>
</div>
这是它的样子:
一旦我完成了它，我想我应该实现它在Codeigniter以及。这是使用Bootstrap的Codeigniter-3验证:
控制器
function addData()
{
$this->load->library('form_validation');
$this->form_validation->set_rules('email','Email','trim|required|valid_email|max_length[128]');
if($this->form_validation->run() == FALSE)
{
//validation fails. Load your view.
$this->loadViews('Load your view','pass your data to view if any');
}
else
{
//validation pass. Your code here.
}
}
View
<div class="col-md-12">
<?php
$email_error = (form_error('email') ? 'has-error has-feedback' : '');
if(!empty($email_error)){
$emailData = '<span class="help-block">'.form_error('email').'</span>';
$emailClass = $email_error;
$emailIcon = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
}
else{
$emailClass = $emailIcon = $emailData = '';
}
?>
<div class="form-group <?= $emailClass ?>">
<input id="enter email" name="email" type="text" placeholder="Enter email" class="form-control ">
<?= $emailIcon ?>
<?= $emailData ?>
</div>
</div>
输出:
