.NET Core MVC如何根据验证错误为asp-validation-for元素增删CSS类

完全可以通过JS实现该需求。ASP.NET Core MVC 默认的客户端验证（基于 jquery.validate.unobtrusive）和服务端验证返回页面时，都会自动给输入框、asp-validation-for 生成的span元素添加固定的状态类，你只需要检测这些状态类、或者监听验证span的内容变化，即可实现自定义CSS类的新增/移除，也可以进一步区分错误类型。

实现方案 #

方案1：基于默认依赖的jQuery实现（推荐）

ASP.NET Core MVC 项目默认引入的客户端验证依赖自带jQuery，直接用内置的状态类判断即可：

$(function () {
    // 绑定目标元素
    const $firstNameInput = $('input[name="Input.FirstName"]');
    const $errorSpan = $('#FirstNameError');

    // 统一校验逻辑
    function checkValidationState() {
        if ($firstNameInput.hasClass('input-validation-error')) {
            // 验证失败：添加自定义错误类
            $errorSpan.addClass('custom-error-bg').removeClass('custom-valid-class');
            
            // 区分错误类型：读取错误文本匹配规则即可
            const errMsg = $errorSpan.text().trim();
            if (errMsg.includes('必填')) {
                $errorSpan.addClass('required-error-style');
            } else if (errMsg.includes('长度不能超过')) {
                $errorSpan.addClass('length-error-style');
            }
        } else if ($firstNameInput.hasClass('input-validation-valid')) {
            // 验证通过：移除所有错误类，添加正常状态类
            $errorSpan.removeClass('custom-error-bg required-error-style length-error-style').addClass('custom-valid-class');
        }
    }

    // 监听所有会触发验证的事件：失焦、输入、表单提交
    $firstNameInput.on('blur keyup', checkValidationState);
    $('form').on('submit', checkValidationState);
    // 页面加载时先执行一次，适配服务端验证返回错误的场景
    checkValidationState();
});

方案2：原生JS无依赖实现

用MutationObserver监听验证span的属性、内容变化即可，不需要依赖任何库：

document.addEventListener('DOMContentLoaded', function () {
    const errorSpan = document.getElementById('FirstNameError');
    // 配置监听规则：监听类变化、文本内容变化
    const observer = new MutationObserver(function () {
        if (errorSpan.classList.contains('field-validation-error')) {
            // 验证失败逻辑
            errorSpan.classList.add('custom-error-bg');
            const errText = errorSpan.textContent.trim();
            if (errText.includes('必填')) errorSpan.classList.add('required-error-style');
        } else if (errorSpan.classList.contains('field-validation-valid')) {
            // 验证通过逻辑
            errorSpan.classList.remove('custom-error-bg', 'required-error-style');
        }
    });

    observer.observe(errorSpan, {
        attributes: true, // 监听属性变化（比如class变化）
        childList: true, // 监听子节点变化（比如添加错误文本）
        subtree: true
    });
});

进阶优化 #

如果不想通过匹配文本区分错误类型，可以自定义TagHelper扩展asp-validation-for，把后端设置的错误编码输出为span的data-error-type自定义属性，前端直接读取属性值判断即可，稳定性更高。

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