asp.net-mvc-4 – 使用Twitter Bootstrap 3放置验证消息的最佳实

发布时间：2020-12-15 19:46:09 所属栏目：asp.Net 来源：网络整理

导读：我正在使用MVC4,但我想这对任何使用新Bootstrap 3版本的人来说都是一个问题.由于表单控件现在是宽度：默认为100％,放置验证消息的最佳做法是什么？在版本2.x中,在输入控件最佳工作之后将验证消息放在帮助内联范围内,以确保将消息放在控件的右侧. 但是在版本

我正在使用MVC4,但我想这对任何使用新Bootstrap 3版本的人来说都是一个问题.由于表单控件现在是宽度：默认为100％,放置验证消息的最佳做法是什么？

在版本2.x中,在输入控件最佳工作之后将验证消息放在帮助内联范围内,以确保将消息放在控件的右侧.

但是在版本3中,它们总是被推到底部,使得所有控件都向下移动,因为验证消息是强制控制的.

<div class="form-group has-error">
    <label for="Label" class="col-lg-2 control-label">Label</label>
    <div class="col-lg-5">
        <input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
        <span class="help-inline"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></span>
    </div>
</div>

我已经考虑在这样的新列上手动设置它们(如下所示),但想知道是否有更可接受的方式或更少的手动方式来处理这个问题.

<div class="form-group has-error">
    <label for="Label" class="col-lg-2 control-label">Label</label>
    <div class="col-lg-5">
        <input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value="">
    </div>
    <div class="col-lg-5">
        <p class="form-control-static"><span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"><span for="Label" generated="true" class="">Required</span></span></p>
    </div>
</div>

解决方法

我不会说有表示验证错误的“最佳实践”.这更像是个人设计选择.

根据你想写多少JS,你可以得到一点点光滑并插入一个输入组插件,它在工具提示图标中保存一条错误消息,就像这样……

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">
    <i data-toggle="tooltip" title="Error msg here" data-container="body" class="glyphicon glyphicon-question-sign"></i>
  </span>
</div>

老实说,我认为出现在输入字段下面的消息很好,只要它们不会打扰页面布局并在内容出现时推送内容. (这只是一个容器显示块并具有硬编码高度的问题.)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!