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

Question

我回到了一个我在 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 个月中出现了一些进展，而这不再是必要的了！欢迎任何想法，让我知道是否可以提供更多详细信息。

Answer 1

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

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

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

...那么您将发现用户提供的值无法绑定到您的数据属性的问题，以及由[Required] 和[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...
}

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

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