ASP.NET-MVC jQuery 不显眼的远程验证返回误报

我又回到了 9 个月前我最后一次参与的项目，查看了我们编写的一些代码，希望现在有更好的方法来做到这一点......

虽然最初对 jQuery 不显眼的验证印象深刻，但我们最终不得不将下面的 hack 组合在一起（部分基于我现在无法动手的博客文章）来处理远程验证。问题在于，如果服务器端验证过程很慢（通常是涉及数据库调用的任何事情），验证器将不会等待验证方法的响应，并且会表现得好像它已经传回了肯定值。

黑客基本上是继续检查验证器是否有任何待处理的请求，直到没有任何待处理的请求为止，此时您可以确定真实的验证结果：

function SaveChangePassword() {

// Find form, fire validation
var $form = $("#btnSave").closest("form");

if ($form.valid()) {
//Do nothing - just firing validation
}

// Calls method every 30 milliseconds until remote validation is complete
var interval = setInterval(saveWhenValidationComplete, 30);

// Check if validation pending, save and clear interval if not
function saveWhenValidationComplete() {

    // Find form validator, check if validation pending - save once remote validation is finished
    var validator = $form.data("validator");
    if (validator.pendingRequest === 0) {

        clearInterval(interval);

        //Force validation to present to user (this will not retrigger remote validation)
        if ($form.valid()) {

            var closeButton = "<br/><input type='button' value='OK' style='font-size:small; font-weight:bold; float:right;' onclick=\"$('#changePasswordDialog').dialog('close');\" class='greenbutton' />";
            // If form is valid then submit
            $.ajax(
                {
                    type: "POST",
                    url: "/Account/SavePassword",
                    data: $form.serialize(),
                    success: function (result) {
                        var successMessage = "<div style='text-align:center; margin-top: 10px;'>" + result + "<div>";
                        $("#changePasswordDialog").html(successMessage + closeButton);
                            },
                    error: function (jqXhr, textStatus, errorThrown) {
                        // Populate dialog with error message and button
                        var errorMessage = "<div style='text-align:center'>Error '" + jqXhr.status + "' (Status: '" + textStatus + "', errorThrown: '" + errorThrown + "')<div>";
                        $("#changePasswordDialog").html(errorMessage + closeButton);
                    }
                });

        }

        // Else validation will show
    }

    // Else don't save yet, wait another 30 miliseconds while validation runs
};

// Prevent default and stop event propagation
return false;
}

我希望在过去的 9 个月里能够取得一些进展，而这已经不再是必要的了！欢迎任何想法，如果我可以提供任何进一步的细节，请告诉我。

虽然您可以提供客户端验证作为对用户的好处，但您应该始终（always!) 在服务器上重新验证。用户很容易禁用 javascript 或以其他方式伪造无效的 POST 到您的控制器操作，如果您不检查服务器端的内容，您就会为用户创建破坏系统中数据的机会。

幸运的是，ASP.NET MVC 中的大多数验证都已经为您完成了。如果您的控制器操作如下所示：

public ActionResult SaveSomething(Something thing)
{
    if(!ModelState.IsValid)
    {
        return View("EditSomething", thing);
    }
    // otherwise, save something...
}

...然后您将发现用户提供的值无法绑定到您的数据属性的问题，以及由属性验证的内容，例如[Required] and [StringLength(x)]。但是，某些形式的验证不会自动为您检查。[Remote]是其中之一。

如果你有一个[Remote]指向控制器操作的属性，如下所示：

public ActionResult CheckThingCodeValidity(string code)
{
    return Json(_thingCodeChecker.ThingCodeWorks(code), JsonRequestBehavior.AllowGet);
}

...那么您的提交操作中也应该有类似的内容：

public ActionResult SaveSomething(Something thing)
{
    if(!_thingCodeChecker.ThingCodeWorks(thing.Code))
    {
        ModelState.AddModelError("Code", "This code is not valid.");
    }
    if(!ModelState.IsValid)
    {
        return View("EditSomething", thing);
    }
    // otherwise, save something...
}

这样，您的标准服务器端验证技术就可以将视图发送回用户，并为他们提供有关该属性的错误消息，以指示他们需要修复的内容。

如果您这样做，那么您不必担心提交表单时异步验证检查是否仍在进行中。如果您的客户端验证通常因缺陷、网络问题或恶意用户干预而失败，也没关系。您仍然会阻止他们提交无效的内容，并且他们仍然会得到一个很好的视图，告诉他们为什么提交无效。