Razor页面模型绑定输入验证样式异常，如何用jQuery Validation修复？

问题原因 #

输入框显示绿色是因为Bootstrap的is-valid类被错误添加，jQuery Validation默认样式逻辑和Bootstrap验证样式不匹配，同时浏览器原生验证也可能造成干扰。以下是纯jQuery Validation控制的解决方案：

步骤1：确保脚本加载顺序正确 #

在页面底部按顺序引入依赖脚本（路径根据项目实际结构调整）：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

步骤2：配置jQuery Validation适配Bootstrap样式 #

在上述脚本后添加自定义配置，覆盖默认样式处理逻辑，让验证状态与Bootstrap的is-invalid/is-valid类对齐：

// 全局配置jQuery Validation的样式行为
$.validator.setDefaults({
    // 验证失败：添加错误样式，移除成功样式
    highlight: function(element) {
        $(element).addClass('is-invalid').removeClass('is-valid');
    },
    // 验证成功：移除错误样式，可选添加成功样式
    unhighlight: function(element) {
        $(element).removeClass('is-invalid').addClass('is-valid');
    },
    // 指定错误提示元素类型和类名，匹配Razor生成的结构
    errorElement: 'span',
    errorClass: 'invalid-feedback',
    // 错误提示放置位置，确保和页面中的span标签对应
    errorPlacement: function(error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

// 禁用浏览器原生验证，避免和jQuery Validation冲突
$('form').attr('novalidate', 'novalidate');

步骤3：调整错误提示标签的样式控制 #

移除现有代码中错误提示span的style="display:block"，交给jQuery Validation自动控制显示隐藏：

<!-- 移除硬编码的display:block -->
<span asp-validation-for="Input.FirstName" class="invalid-feedback"></span>
<span asp-validation-for="Input.LastName" class="invalid-feedback"></span>

原理说明 #

ASP.NET Core的Unobtrusive Validation会自动把模型上的[Required]属性转换为jQuery Validation规则，通过上述配置：

• 验证失败时，输入框会被添加is-invalid类（Bootstrap默认渲染为红色边框），同时显示错误提示
• 验证成功时，移除错误样式，可选添加is-valid绿色样式
• 禁用原生验证后，完全由jQuery Validation接管验证逻辑，满足后续扩展复杂规则的需求

内容的提问来源于stack exchange，提问作者user5492949