如何使用 ASP.NET Razor 语法应用引导 v4 表单输入验证类？答案

【问题标题】：How to apply bootstrap v4 form input validation classes with the ASP.NET Razor syntax?如何使用 ASP.NET Razor 语法应用引导 v4 表单输入验证类？
【发布时间】：2018-07-06 18:14:32
【问题描述】：

以下代码：

查看：（有效）

<div class="form-group">
    @Html.LabelFor(m => m.Telefone, new { @class = "font-weight-bold" })
    @Html.TextBoxFor(m => m.Telefone, new { @class = "form-control is-valid", @placeholder = "Digite seu telefone" })
    @Html.ValidationMessageFor(m => m.Telefone, "", new { @class = "text-danger" })
</div>

查看：（无效）

<div class="form-group">
    @Html.LabelFor(m => m.Telefone, new { @class = "font-weight-bold" })
    @Html.TextBoxFor(m => m.Telefone, new { @class = "form-control is-invalid", @placeholder = "Digite seu telefone" })
    @Html.ValidationMessageFor(m => m.Telefone, "", new { @class = "text-danger" })
</div>

示例：https://getbootstrap.com/docs/4.3/components/forms/#server-side

有什么办法吗？

【问题讨论】：

这对我有帮助：stackoverflow.com/a/44387981/2588539

标签： asp.net-mvc razor bootstrap-4

【解决方案1】：

使用 Tag Helpers 的简单解决方案：

        <div class="form-group">
            <input asp-for="Email" class="form-control">
            <div class="invalid-feedback" style="display:block;">
                <span asp-validation-for="Email"></span>
            </div>
        </div>

【讨论】：

如果您想使用 is-vailid 或 is-invalid 更改输入框本身，使其显示绿色或红色怎么办？ ""

【解决方案2】：

类名是硬编码的：https://github.com/dotnet/aspnetcore/blob/v3.1.6/src/Mvc/Mvc.ViewFeatures/src/HtmlHelper.cs#L25

唯一的选择是改变 CSS。

当您从源代码构建 Bootstrap 时，您只需将下一个代码添加到您的 SCSS 文件中：

.input-validation-error {
  @extend .is-invalid;
}

这将为现有的 .is-invalid 创建一个别名。

【讨论】：

对于那些搜索，这适用于 .NET 5 和 Bootstrap 5。

【解决方案3】：

//CONFIGURACAO BOOTSTRAP 4 PARA JQUERY VALIDATION PLUGIN
jQuery.validator.setDefaults({
    onfocusout: function (e) {
        this.element(e);
    },
    //onkeyup: false,
    highlight: function (element) {
        jQuery(element).closest('.form-control').addClass('is-invalid');
    },
    unhighlight: function (element) {
        jQuery(element).closest('.form-control').removeClass('is-invalid');
        jQuery(element).closest('.form-control').addClass('is-valid');
    },

    errorElement: 'div',
    errorClass: 'invalid-feedback',
    errorPlacement: function (error, element) {
        if (element.parent('.input-group-prepend').length) {
            $(element).siblings(".invalid-feedback").append(error);
            //error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
});

【讨论】：

口头解释通常对答案很有帮助

【解决方案4】：

Razor 使用 jQuery 验证。您只需要使用 Bootstrap 绑定 jq-valid：

$('form').validate().settings.errorClass += ' is-invalid';
$('form').validate().settings.validClass += ' is-valid';

【讨论】：

【解决方案5】：

基于 Seagull 对 .Net 5 和 Bootstrap 5 的回答（我无法评论他的回答）。

我能够按照本指南 https://www.dotnetcatch.com/2019/05/16/adding-bootstrap-sass-to-asp-net-core/ 构建包含 ASP.NET 验证类名称的自定义 Bootstrap CSS，以便您了解 Bootstrap 验证控件的外观。

@import "../lib/bootstrap/scss/bootstrap";

.input-validation-error {
    @extend .is-invalid;
}

【讨论】：

【解决方案6】：

一定要包括： “jquery.js jquery.validate .js jquery.validate.unobtrusive .js"

【讨论】：