如何在Razor表单中无缝集成Bootstrap 5客户端验证？

问题背景 #

Bootstrap 5通过:invalid/:valid伪类为表单控件提供原生样式，但Razor Pages生成的ASP.NET Unobtrusive Validation（data-val-*属性）无法被Bootstrap直接识别。需要在保留Razor模型验证定制能力的前提下，实现两者无缝配合。

原始Razor Pages表单代码 #

<form id="account" method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-floating mb-3">
        <input asp-for="Input.Email" class="form-control" autocomplete="username" aria-required="true" />
        <label asp-for="Input.Email" class="form-label"></label>
        <span asp-validation-for="Input.Email" class="text-danger"></span>
    </div>
    <!-- 其他表单字段 -->
</form>

渲染后的前端代码 #

<form id="account" method="post">
    <div class="form-floating mb-3">
        <input class="form-control" autocomplete="username" aria-required="true" type="email" data-val="true"
            data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required."
            id="Input_Email" name="Input.Email" value="">
        <label class="form-label" for="Input_Email">Email</label>
        <span class="text-danger field-validation-valid" data-valmsg-for="Input.Email" data-valmsg-replace="true"></span>
    </div>
    <!-- 其他表单字段 -->
</form>

解决方案 #

1. 用CSS桥接验证状态（最简方案） #

ASP.NET Unobtrusive Validation会自动给验证失败/成功的控件添加input-validation-error/input-validation-valid类，我们直接给这些类应用Bootstrap的:invalid/:valid样式：

/* 同步验证错误样式到Bootstrap规范 */
.input-validation-error {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.input-validation-error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* 可选：同步验证成功样式 */
.input-validation-valid {
    border-color: #198754;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

2. 用JS同步Bootstrap官方状态类（更贴合原生逻辑） #

监听Unobtrusive Validation的事件，在验证状态变化时给控件添加/移除Bootstrap官方的is-invalid/is-valid类：

// 确保在jQuery、jquery.validate、jquery.validate.unobtrusive加载后执行
$(function () {
    // 表单整体验证完成后同步状态
    $('form').on('invalid-form.validate', function (e, validator) {
        validator.currentElements.removeClass('is-valid is-invalid');
        validator.errorList.forEach(error => {
            $(error.element).addClass('is-invalid');
        });
    });

    // 单个控件验证时同步状态
    $('input, select, textarea').on('blur.validate keyup.validate', function () {
        const $el = $(this);
        const validator = $el.data('validator');
        if (validator) {
            validator.element($el);
            if ($el.hasClass('input-validation-error')) {
                $el.removeClass('is-valid').addClass('is-invalid');
            } else if ($el.hasClass('input-validation-valid')) {
                $el.removeClass('is-invalid').addClass('is-valid');
            }
        }
    });
});

3. 确保脚本加载顺序 #

页面中需按以下顺序加载依赖脚本：

• jQuery
• jquery.validate.js
• jquery.validate.unobtrusive.js
• 上述自定义JS（若使用方法二）

4. 保留Razor模型验证的定制能力 #

所有模型上的验证特性（如[Required]、[EmailAddress]、自定义验证特性）依然完全生效，Razor会自动生成对应的data-val-*属性，后端验证逻辑也不受影响。

例如自定义错误消息：

public class LoginInputModel
{
    [Required(ErrorMessage = "请输入邮箱地址")]
    [EmailAddress(ErrorMessage = "请输入有效的邮箱格式")]
    public string Email { get; set; }
}

自定义消息会正常显示在asp-validation-for生成的提示框中，同时样式同步生效。

内容的提问来源于stack exchange，提问作者Igor N.