ASP.NET Core中实现Remote属性HTTP请求的延迟触发

ASP.NET的[Remote]属性依赖jQuery Validate和jQuery Unobtrusive Validation实现前端验证，默认会在输入框的keyup、blur等事件触发后立即发起HTTP请求，导致输入过程中频繁请求服务器。要实现输入停止一段时间后再触发验证，可通过以下两种方式处理：

方案一：全局修改所有Remote验证的防抖逻辑 #

如果希望所有使用[Remote]属性的字段都启用防抖，可重写jQuery Validate的remote方法，结合防抖函数实现：

// 定义防抖函数：延迟执行传入的方法，停止输入wait毫秒后才触发
function debounce(func, wait) {
    let timeoutId;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(context, args), wait);
    };
}

// 重写jQuery Validate的remote方法，添加500ms防抖（可自行调整时间）
$(function() {
    $.validator.methods.remote = debounce($.validator.methods.remote, 500);
});

方案二：针对特定字段单独配置防抖 #

如果只需要给某个字段（比如你的FirstName字段）添加防抖，可单独修改该字段的验证触发逻辑：

$(function() {
    // 获取表单的验证实例
    const formValidator = $("form").data("validator");
    // 目标输入框
    const firstNameInput = $("input[name='FirstName']");

    // 移除默认的keyup事件绑定，避免立即触发验证
    firstNameInput.off("keyup");

    // 绑定带防抖的keyup事件，停止输入500ms后触发验证
    firstNameInput.on("keyup", debounce(function() {
        // 手动触发当前字段的Remote验证
        formValidator.element(this);
    }, 500));
});

// 通用防抖函数
function debounce(func, wait) {
    let timeoutId;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(context, args), wait);
    };
}

注意事项 #

• 脚本需放在jQuery、jQuery Validate、jQuery Unobtrusive Validation之后加载，确保DOM和验证实例已初始化。
• 防抖时间可根据需求调整（比如300ms、1000ms），平衡用户体验和请求频率。
• 默认的blur事件仍会立即触发验证，这是合理的：用户离开输入框时应即时验证，防抖仅针对输入过程中的连续按键。

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