Javascript 如何将jQuery验证插件与元数据、jQuery表单和xVal一起使用？

我一直在使用framework for.NET进行一些开发，将服务器端模型的一些验证规则与客户端验证连接起来，并使用提交表单的

然而，我在将它们连接在一起时遇到了问题

我正在努力实现以下目标：

允许客户端使用调用插件进行jQuery验证所定义的规则执行基本验证（这是xVal用来获取在模型服务器端定义的规则）

如果客户机验证成功，则调用服务器以再次输入表单数据执行验证（针对在客户机上验证的项目以及无法在客户机上执行的任何其他验证）

让服务器返回JSON中的对象，该对象指示可能具有特定字段的任何错误，然后为字段设置错误显示

我通过以下方式调用xVal，在ASP.NET MVC页面中为插件设置了元数据：

<%= Html.ClientSideValidation<Model>("model") %>

这在客户端转化为以下内容：

<script type="text/javascript">
xVal.AttachValidator("model", 
{
    "Fields": 
    [ 
        {
            "FieldName":"title",
            "FieldRules": 
            [
                {
                    "RuleName":"Required",
                    "RuleParameters":{}
                },
                {
                    "RuleName":"StringLength",
                    "RuleParameters":
                    {
                        "MaxLength":"250"
                    }
                }
            ]
        },
        {
            "FieldName":"body",
            "FieldRules":
            [
                {
                    "RuleName":"Required",
                    "RuleParameters":{}
                }
            ]
        }
    ]
}, {})
</script>

xVal.AttachValidator（“模型”，
{
“字段”：
[ 
{
“字段名”：“标题”，
“现场规则”：
[
{
“规则名称”：“必需”，
“规则参数”：{}
},
{
“规则名称”：“StringLength”，
“规则参数”：
{
“MaxLength”：“250”
}
}
]
},
{
“字段名”：“正文”，
“现场规则”：
[
{
“规则名称”：“必需”，
“规则参数”：{}
}
]
}
]
}, {})

上述内容实际上只是转换为对

规则（“add”，options）

的一系列调用，jQuery验证器插件随后会处理这些调用

但是，当尝试通过jQuery表单发布此表单时，不会对表单值进行验证。表单提交，但值根本没有被验证

---

在jQuery验证插件通过调用

ajax

进行验证的同时，如何使用jQuery表单插件提交表单？

将所有这些放在一起时，需要注意的最重要的事情是一小段文档（这在xVal的文档中并不明显，它抽象了对

xVal.AttachValidator

的调用中对

规则的调用（“添加”，选项）

），用于

规则（“添加”，选项）

（重点是我的）：

添加指定的规则并返回 第一次的所有规则都匹配 元素。要求父元素 表单是经过验证的，即， $（“表单”）.validate（）被调用 首先。

当jQuery表单插件发挥作用，并且您希望通过AJAX提交表单时，这一点尤其重要，因为您必须在调用中设置一个

submitHandler

选项，如下所示：

<script type="text/javascript">
    $(document).ready(function() {
        // Initialize the form.  Store the validator.
        var validator = $("form").validate({

            // Called when the form is valid.
            submitHandler: function(form) {

                // Submit the form via ajax.
                $(form).ajaxSubmit({

                    // The return data type is json.
                    dataType: "json",

                    // The callback on a successful form
                    // submission.
                    success: function(data, statusText) {

                        // If the new location is not null, then
                        // redirect to that location.
                        if (data.data.newLocation) {
                            // Go to the new location.
                            document.location.href = data.data.newLocation;

                            // Get out.
                            return;
                        }

                        // There are errors, pass them to the validator
                        // for display.
                        validator.showErrors(data.data.errors);
                    }
                });
            }
        });
    });
</script>

最后，所有这些都连接好了，最后要做的事情是当服务器端方法返回时要做什么

您希望从这些调用返回的JSON类似于标准化的viewmodel shell，其中响应特定的内容包装在一个更标准化的片段中，该片段公开了您在同构调用中所需的信息，如下所示：

{
    // An integer, non-zero indicates faulure, with predefined ranges
    // for standard errors across all operations, with other ranges for custom
    // errors which are operation-specific.  Examples of shared errors
    // are not authenticated, not authorized, etc, etc.
    resultCode: 0,

    // A string, which is to be displayed to the user (usually in the
    // form of a jQuery dialog, usually used for the common ranges of
    // errors defined above.
    message: null,

    // An object with operation-specific results.
    data: null
}

对于服务器上的错误，返回与上面相同的内容，但返回的位置包含成功时用户应重定向到的URL（如果不成功，则返回null）以及一个映射，如果字段上有错误，则可以直接传递给方法：

{
    resultCode: 0,

    message: null,

    data:
    {
        // Returned as a string.  If not null, then this is the url
        // that the client should be redirected to, as the server-side
        // operation was successful.
        newLocation: null,

        // If not-null, then this is a map which has the names of the
        // fields with the errors, along with the errors for the fields.
        errors:
        {
            "model.title": "The title already exists in the system.",
            "model.body": "The body cannot have malicious HTML code in it."
        }
    }
}

有鉴于此，传递给的信息应该是明确的：

// The callback on a successful form
// submission.
success: function(data, statusText) {

    // If the new location is not null, then
    // redirect to that location.
    if (data.data.newLocation) {
        // Go to the new location.
        document.location.href = data.data.newLocation;

        // Get out.
        return;
    }

    // There are errors, pass them to the validator
    // for display.
    validator.showErrors(data.data.errors);
}

它所做的只是检查

newLocation

属性是否已定义。如果已定义，则会将当前文档重定向到该位置（通常是新保存资源的url）

如果未定义，则它会获取地图并将其传递给通过调用

验证（选项）

返回的验证器上的

错误，使用调用
验证（选项）
指定的位置和样式设置错误消息

// The callback on a successful form
// submission.
success: function(data, statusText) {

    // If the new location is not null, then
    // redirect to that location.
    if (data.data.newLocation) {
        // Go to the new location.
        document.location.href = data.data.newLocation;

        // Get out.
        return;
    }

    // There are errors, pass them to the validator
    // for display.
    validator.showErrors(data.data.errors);
}