向远程验证属性 MVC3 添加延迟

Question

我有一个情况，在执行注册页面时，我必须检查数据库中是否存在用户名。为此，我在模型中实现了用于远程验证的远程属性

[Remote("CheckUserNameAvaliable", "User", Httpmethod="Post")]
public string Username {get; set;}

，我的方法看起来像这样，

[HttpPost]
public JsonResult CheckUserNameAvaliable(string UserName)
{
    SessionUser currentUser = this.sessionHelper.GetCurrentUser();
    User user = this.userService.GetByUsername(UserName);
    if (user != null && user.Id != currentUser.Id)
    {
        return Json(false);
    }

    return Json(true);
}

它对我来说效果很好，但问题是，每当我们在用户名文本框上输入密钥时，它都会归档此远程验证，但根据根据我的要求，我必须仅在用户名文本框中输入值后才触发此远程验证。为此，我们可以强制为远程验证属性添加延迟吗？

有谁知道如何在 MVC3 中添加远程验证延迟？

Answer 1

MVC3在浏览器中使用jquery.validate插件。使用 jquery.validate，字段验证直到字段第一次更改和模糊时才开始，或者如果字段未被触及则在提交时开始。

一旦字段验证开始，验证器的 onkeyup 设置将控制是否对每个 keyup 事件执行验证。如果您在每次按键时对字段执行远程验证，则可能会发送过多的 ajax 消息，给客户端和服务器带来压力。

正如其他响应者提到的，您可以通过设置 validator.settings.onkeyup = false 来抑制 keyup 验证，但这会抑制所有表单字段的 onkeyup 验证，而不仅仅是那些具有远程验证规则的表单字段。我的建议是，当具有远程验证的字段具有焦点时，您抑制键盘按键，然后在模糊该字段时将其重新打开。

抑制 onkeyup 很容易。问题在于，将设置从 false 更改为 true 不会重新打开该功能。要重新打开它，您需要将其设置为 $.validator 对象的默认值中定义的函数。

如果您使用 MVC 非侵入式验证，则以下是要包含在页面上的 javascript 代码。它将涵盖您页面上的所有表单。并且一定要使用 jquery.validate 版本 1.9.0 或更高版本，因为早期版本无法在 IE 7 或 8 上正常工作（是的，我也必须支持这些用户）：

    $("form input[data-val-remote-url]").on({
        focus: function () {
            $(this).closest('form').validate().settings.onkeyup = false;
        },
        blur: function () {
            $(this).closest('form').validate().settings.onkeyup =
                $.validator.defaults.onkeyup;
        }
    });

Answer 2

我之前在使用 MVC3 和远程验证时也遇到过类似的问题。猜测您希望事件在模糊时触发，但不确定如何告诉远程验证..

希望这会有所帮助

ASP.NET 远程验证仅在模糊时进行？

Answer 3

如果您不想在 keyup 上验证，而是在模糊上验证，那么这个 就是你想要的

Answer 4

没有一种方法是合适的答案，因为它消除了在错误已经显示时重新验证 keyup 的能力。我仍然想要一个反跳功能，而不是当前在每次按键时都会点击 API 的实现。

我的解决方案是重写远程方法。

// Will use a simple variable to hold our current remote API request
// may want to do something smarter later
var holderForCurrentRemoteCall = null;

// keep the original as we're going to make use of it
jQuery.validator.methods._remoteRule = jQuery.validator.methods.remote;

jQuery.validator.methods.remote = function (value, element, param, method) {
    // the orig remote method sets a pending class when the call is in progress
    // we'll quickly exit and continue the pending.
    if ($(element).hasClass('pending')) { return 'pending'; }

    // we're going to need the previous value to stop any
    // mid-stream request
    method = typeof method === "string" && method || "remote";
    var previous = this.previousValue(element, method);

    if (holderForCurrentRemoteCall != null) {
        // stop any current request
        this.stopRequest(element, previous.valid);
        // and clear out any timeout that hasn't executed yet
        clearTimeout(holderForCurrentRemoteCall);
        holderForCurrentRemoteCall  = null;
    }

    // Within the orig remote call, it has some mnemonic so it won't
    // make the same request twice
    // as we can't capture it here, bubbling the request to orig would
    // not give a desirable outcome for our stub. 
    // so I've taken the mnemonic part of the code and replicate here
    if (this.optional(element)) {
        return "dependency-mismatch";
    }

    if (!this.settings.messages[element.name]) {
        this.settings.messages[element.name] = {};
    }
    previous.originalMessage = previous.originalMessage || this.settings.messages[element.name][method];
    this.settings.messages[element.name][method] = previous.message;

    param = typeof param === "string" && { url: param } || param;
    var optionDataString = $.param($.extend({ data: value }, param.data));
    if (previous.old === optionDataString) {
        return previous.valid;
    }
    // End copy-pasta code

    holderForCurrentRemoteCall  = setTimeout(() => {
        jQuery.validator.methods._remoteRule.call(this, value, element, param, method);
        // remove the holder as we have nothing to cancel
        holderForCurrentRemoteCall = null;
    }, 300);

    return "pending";
}