用页面脚本扩展mvc自动添加的验证

mvc中可以用DataAnnotations来对模型进行验证

当在页面中引入

jquery，jquery.validate，jquery.validate.unobtrusive这3个脚本的时候，会根据model上的设置自动生成验证

[Required]

public string Email { get; set; }

比如我有这样的字段，他会在页面上生成必填的验证

默认错误信息是用span来呈现的

如果不希望使用默认设置，而希望在不同的页面，或在同一个页面的不同表单做不同的设置，用mvc自动生成的就很难实现了。

其实validate本身是可以设置的

$(function () {
    $("form").validate({
        errorElement: "div",
        rules: { Email: { email: true,required:true } }
    });
});

如类似上面的代码

错误信息是用div来呈现的。

如果，在一个引入了jquery.validate.unobtrusive的页面中，写入上面的语句，是没有用的

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script>
    $(function () {
        $("form").validate({
            errorElement: "div",
            rules: { Email: { email: true } }
        });
    });

……

类似这样。因为unobtrusive先执行了，所以页面中用validate设置的无效

让引入的js后执行

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript" defer></script>

在引用的时候加上defer，这样虽然引入的代码写在前面，但是执行是在后面

加上以后，可以看到，页面中的代码起了作用。但是自动生成又失效了。必填验证没有了。

查看unobtrusive的代码发现

function validationInfo(form) {
    var $form = $(form),
        result = $form.data(data_validation);
    //如果直接在页面上用validate写了验证，就不做
        if (!result) {
           ……

       }

    return result;
}

他会先去看有没有验证信息，如果没有，才加，有就不加了。

只好自己修改一下了。

首先，仍然是通过对某一个表单进行设置，这样同一个页面上有多个表单的时候，可以其中一个变，而另一个不变

写一个扩展方法，传入设置，并记录在调用的对象上。其中，set_validation是自定义的一个字符串，相当于字典key

$.extend($.fn, {
   setValidation:function(opt) {           
       $.data(this[0],set_validation,opt);
    }
});

修改validationInfo方法 if(!result)中的部分

var defaults = {
    errorClass: "input-validation-error",
    errorElement: "span",
    errorPlacement: $.proxy(onError, form),
    invalidHandler: $.proxy(onErrors, form),
    messages: {},
    rules: {},
    success: $.proxy(onSuccess, form)
};
var opt = $form.data(set_validation);               
var setting = $.extend(defaults, opt);
result = {
    options: setting,

……

把他直接写在options里的拿出来作为默认值

读取通过setValidation方法加到表单上的设置

把设置覆盖到默认值上作为最终的设置值。

到目前为止，设置erroeElement等已经可以生效，但是rules和messages还是无效。

原因在于

parseElement: function (element, skipAttach) {

方法中有这么两句

valInfo.options.rules[element.name] = rules = {};
valInfo.options.messages[element.name] = messages = {};

他把rules和messages都清空了。我尝试不清空，但是发现有问题。我懒的研究他具体是怎么把那些规则加进去的了。好在在后面发现了一句

jQuery.extend(rules, { "__dummy__": true });

在方法基本已经结束的位置他还对rules做了操作

于是在清空之前，记录下原始数据，在这里附加原始数据

valInfo = validationInfo(form);
//记录设置
var settingRule = valInfo.options.rules[element.name];
var settingMessage = valInfo.options.messages[element.name];
valInfo.options.rules[element.name] = rules = {};
valInfo.options.messages[element.name] = messages = {};

最后

//附加设置
jQuery.extend(rules, { "__dummy__": true }, settingRule);
jQuery.extend(messages, settingMessage);

到此rules和messages也可以加进来了。

页面调用

$(function () {
    $("#form1").setValidation({
        errorElement:"div",
        rules: { Email: { email: true } }
    });
});

上面的表单form1附加了用div显示，及email格式验证

修改过的unobtrusive如下

/// <reference path="jquery-1.5.1.js" />
/// <reference path="jquery.validate.js" />

/*!
** Unobtrusive validation support library for jQuery and jQuery Validate
** Copyright (C) Microsoft Corporation. All rights reserved.
*/

/*jslint white: true, browser: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: false */
/*global document: false, jQuery: false */

/*modify by czcz1024*/
(function ($) {
    var $jQval = $.validator,
        adapters,
        set_validation="unobtrusiveValidationSettings"
        data_validation = "unobtrusiveValidation";

    function setValidationValues(options, ruleName, value) {
        options.rules[ruleName] = value;
        if (options.message) {
            options.messages[ruleName] = options.message;
        }
    }

    function splitAndTrim(value) {
        return value.replace(/^\s+|\s+$/g, "").split(/\s*,\s*/g);
    }

    function escapeAttributeValue(value) {
        // As mentioned on http://api.jquery.com/category/selectors/
        return value.replace(/([!"#$%&'()*+,./:;<=>?@\[\\\]^`{|}~])/g, "\\$1");
    }

    function getModelPrefix(fieldName) {
        return fieldName.substr(0, fieldName.lastIndexOf(".") + 1);
    }

    function appendModelPrefix(value, prefix) {
        if (value.indexOf("*.") === 0) {
            value = value.replace("*.", prefix);
        }
        return value;
    }

    function onError(error, inputElement) {  // 'this' is the form element
        var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
            replace = $.parseJSON(container.attr("data-valmsg-replace")) !== false;

        container.removeClass("field-validation-valid").addClass("field-validation-error");
        error.data("unobtrusiveContainer", container);

        if (replace) {
            container.empty();
            error.removeClass("input-validation-error").appendTo(container);
        }
        else {
            error.hide();
        }
    }

    function onErrors(form, validator) {  // 'this' is the form element
        var container = $(this).find("[data-valmsg-summary=true]"),
            list = container.find("ul");

        if (list && list.length && validator.errorList.length) {
            list.empty();
            container.addClass("validation-summary-errors").removeClass("validation-summary-valid");

            $.each(validator.errorList, function () {
                $("<li />").html(this.message).appendTo(list);
            });
        }
    }

    function onSuccess(error) {  // 'this' is the form element
        var container = error.data("unobtrusiveContainer"),
            replace = $.parseJSON(container.attr("data-valmsg-replace"));

        if (container) {
            container.addClass("field-validation-valid").removeClass("field-validation-error");
            error.removeData("unobtrusiveContainer");

            if (replace) {
                container.empty();
            }
        }
    }

    function validationInfo(form) {
        var $form = $(form),
            result = $form.data(data_validation);
        //如果直接在页面上用validate写了验证，就不做
            if (!result) {
                //默认值
                var defaults = {
                    errorClass: "input-validation-error",
                    errorElement: "span",
                    errorPlacement: $.proxy(onError, form),
                    invalidHandler: $.proxy(onErrors, form),
                    messages: {},
                    rules: {},
                    success: $.proxy(onSuccess, form)
                };
                var opt = $form.data(set_validation);
                var setting = $.extend(defaults, opt);
                result = {
                    options: setting,
                    attachValidation: function () {
                        $form.validate(this.options);
                    },
                    validate: function () {  // a validation function that is called by unobtrusive Ajax
                        $form.validate();
                        return $form.valid();
                    }
                };
            $form.data(data_validation, result);
        }

        return result;
    }

    $jQval.unobtrusive = {
        adapters: [],

        parseElement: function (element, skipAttach) {
            /// <summary>
            /// Parses a single HTML element for unobtrusive validation attributes.
            /// </summary>
            /// <param name="element" domElement="true">The HTML element to be parsed.</param>
            /// <param name="skipAttach" type="Boolean">[Optional] true to skip attaching the
            /// validation to the form. If parsing just this single element, you should specify true.
            /// If parsing several elements, you should specify false, and manually attach the validation
            /// to the form when you are finished. The default is false.</param>
            var $element = $(element),
                form = $element.parents("form")[0],
                valInfo, rules, messages;

            if (!form) {  // Cannot do client-side validation without a form
                return;
            }

            valInfo = validationInfo(form);
            //记录设置
            var settingRule = valInfo.options.rules[element.name];
            var settingMessage = valInfo.options.messages[element.name];
            valInfo.options.rules[element.name] = rules = {};
            valInfo.options.messages[element.name] = messages = {};

            $.each(this.adapters, function () {
                var prefix = "data-val-" + this.name,
                    message = $element.attr(prefix),
                    paramValues = {};

                if (message !== undefined) {  // Compare against undefined, because an empty message is legal (and falsy)
                    prefix += "-";

                    $.each(this.params, function () {
                        paramValues[this] = $element.attr(prefix + this);
                    });

                    this.adapt({
                        element: element,
                        form: form,
                        message: message,
                        params: paramValues,
                        rules: rules,
                        messages: messages
                    });
                }
            });

            //附加设置
            jQuery.extend(rules, { "__dummy__": true }, settingRule);
            jQuery.extend(messages, settingMessage);

            if (!skipAttach) {
                valInfo.attachValidation();
            }
        },

        parse: function (selector) {
            /// <summary>
            /// Parses all the HTML elements in the specified selector. It looks for input elements decorated
            /// with the [data-val=true] attribute value and enables validation according to the data-val-*
            /// attribute values.
            /// </summary>
            /// <param name="selector" type="String">Any valid jQuery selector.</param>
            $(selector).find(":input[data-val=true]").each(function () {
                $jQval.unobtrusive.parseElement(this, true);
            });

            $("form").each(function () {
                var info = validationInfo(this);
                if (info) {
                    info.attachValidation();
                }
            });
        }
    };

    adapters = $jQval.unobtrusive.adapters;

    adapters.add = function (adapterName, params, fn) {
        /// <summary>Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation.</summary>
        /// <param name="adapterName" type="String">The name of the adapter to be added. This matches the name used
        /// in the data-val-nnnn HTML attribute (where nnnn is the adapter name).</param>
        /// <param name="params" type="Array" optional="true">[Optional] An array of parameter names (strings) that will
        /// be extracted from the data-val-nnnn-mmmm HTML attributes (where nnnn is the adapter name, and
        /// mmmm is the parameter name).</param>
        /// <param name="fn" type="Function">The function to call, which adapts the values from the HTML
        /// attributes into jQuery Validate rules and/or messages.</param>
        /// <returns type="jQuery.validator.unobtrusive.adapters" />
        if (!fn) {  // Called with no params, just a function
            fn = params;
            params = [];
        }
        this.push({ name: adapterName, params: params, adapt: fn });
        return this;
    };

    adapters.addBool = function (adapterName, ruleName) {
        /// <summary>Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation, where
        /// the jQuery Validate validation rule has no parameter values.</summary>
        /// <param name="adapterName" type="String">The name of the adapter to be added. This matches the name used
        /// in the data-val-nnnn HTML attribute (where nnnn is the adapter name).</param>
        /// <param name="ruleName" type="String" optional="true">[Optional] The name of the jQuery Validate rule. If not provided, the value
        /// of adapterName will be used instead.</param>
    /// <returns type="jQuery.validator.unobtrusive.adapters" />

        if (adapterName == "dateiso") adapterName = "dateISO";
        return this.add(adapterName, function (options) {
            setValidationValues(options, ruleName || adapterName, true);
        });
    };

    adapters.addMinMax = function (adapterName, minRuleName, maxRuleName, minMaxRuleName, minAttribute, maxAttribute) {
        /// <summary>Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation, where
        /// the jQuery Validate validation has three potential rules (one for min-only, one for max-only, and
        /// one for min-and-max). The HTML parameters are expected to be named -min and -max.</summary>
        /// <param name="adapterName" type="String">The name of the adapter to be added. This matches the name used
        /// in the data-val-nnnn HTML attribute (where nnnn is the adapter name).</param>
        /// <param name="minRuleName" type="String">The name of the jQuery Validate rule to be used when you only
        /// have a minimum value.</param>
        /// <param name="maxRuleName" type="String">The name of the jQuery Validate rule to be used when you only
        /// have a maximum value.</param>
        /// <param name="minMaxRuleName" type="String">The name of the jQuery Validate rule to be used when you
        /// have both a minimum and maximum value.</param>
        /// <param name="minAttribute" type="String" optional="true">[Optional] The name of the HTML attribute that
        /// contains the minimum value. The default is "min".</param>
        /// <param name="maxAttribute" type="String" optional="true">[Optional] The name of the HTML attribute that
        /// contains the maximum value. The default is "max".</param>
        /// <returns type="jQuery.validator.unobtrusive.adapters" />
        return this.add(adapterName, [minAttribute || "min", maxAttribute || "max"], function (options) {
            var min = options.params.min,
                max = options.params.max;

            if (min && max) {
                setValidationValues(options, minMaxRuleName, [min, max]);
            }
            else if (min) {
                setValidationValues(options, minRuleName, min);
            }
            else if (max) {
                setValidationValues(options, maxRuleName, max);
            }
        });
    };

    adapters.addSingleVal = function (adapterName, attribute, ruleName) {
        /// <summary>Adds a new adapter to convert unobtrusive HTML into a jQuery Validate validation, where
        /// the jQuery Validate validation rule has a single value.</summary>
        /// <param name="adapterName" type="String">The name of the adapter to be added. This matches the name used
        /// in the data-val-nnnn HTML attribute(where nnnn is the adapter name).</param>
        /// <param name="attribute" type="String">[Optional] The name of the HTML attribute that contains the value.
        /// The default is "val".</param>
        /// <param name="ruleName" type="String" optional="true">[Optional] The name of the jQuery Validate rule. If not provided, the value
        /// of adapterName will be used instead.</param>
        /// <returns type="jQuery.validator.unobtrusive.adapters" />
        return this.add(adapterName, [attribute || "val"], function (options) {
            setValidationValues(options, ruleName || adapterName, options.params[attribute]);
        });
    };

    $jQval.addMethod("__dummy__", function (value, element, params) {
        return true;
    });

    $jQval.addMethod("regex", function (value, element, params) {
        var match;
        if (this.optional(element)) {
            return true;
        }

        match = new RegExp(params).exec(value);
        return (match && (match.index === 0) && (match[0].length === value.length));
    });

    adapters.addSingleVal("accept", "exts").addSingleVal("regex", "pattern");
    adapters.addBool("creditcard").addBool("date").addBool("dateiso").addBool("digits").addBool("email").addBool("number").addBool("url");
    adapters.addMinMax("length", "minlength", "maxlength", "rangelength").addMinMax("range", "min", "max", "range");
    adapters.add("equalto", ["other"], function (options) {
        var prefix = getModelPrefix(options.element.name),
            other = options.params.other,
            fullOtherName = appendModelPrefix(other, prefix),
            element = $(options.form).find(":input[name=" + escapeAttributeValue(fullOtherName) + "]")[0];

        setValidationValues(options, "equalTo", element);
    });
    adapters.add("required", function (options) {
        // jQuery Validate equates "required" with "mandatory" for checkbox elements
        if (options.element.tagName.toUpperCase() !== "INPUT" || options.element.type.toUpperCase() !== "CHECKBOX") {
            setValidationValues(options, "required", true);
        }
    });
    adapters.add("remote", ["url", "type", "additionalfields"], function (options) {
        var value = {
            url: options.params.url,
            type: options.params.type || "GET",
            data: {}
        },
            prefix = getModelPrefix(options.element.name);

        $.each(splitAndTrim(options.params.additionalfields || options.element.name), function (i, fieldName) {
            var paramName = appendModelPrefix(fieldName, prefix);
            value.data[paramName] = function () {
                return $(options.form).find(":input[name='" + escapeAttributeValue(paramName) + "']").val();
            };
        });

        setValidationValues(options, "remote", value);
    });
    //扩展方法，记录设置的参数
    $.extend($.fn, {
        setValidation: function (opt) {
            $.data(this[0],set_validation,opt);
        }
    });

    $(function () {
        $jQval.unobtrusive.parse(document);
    });
} (jQuery));

另外，之前的文章中，介绍过如何通过设置DataType(DataType.Date)就自动生成日期类型的验证

如果使用validation提供的date，只能验证2011/1/1 这样斜杠形式的，而不能验证2011-1-1横杠形式。要验证横杠需要用到的是dateISO，注意是区分大小写的，ISO必须是大写。但是改c#中date为dateISO就悲剧了。

Validation type names in unobtrusive client validation rules must consist of only lowercase letters. Invalid name: "dateISO", client rule type: mvc4.Models.ModelClientValidationDateRule

只能有小写字母，不知道为什么只能是小写。

那这就小写吧。还是得改unobtrusive

adapters.addBool("creditcard").addBool("date").addBool("digits").addBool("email").addBool("number").addBool("url");

首先找到这句，发现他只添加date验证，不添加dateiso验证，加上

adapters.addBool("creditcard").addBool("date").

addBool("dateiso"

).addBool("digits").addBool("email").addBool("number").addBool("url");

然后找到addBool方法在return之前加上

if (adapterName == "dateiso") adapterName = "dateISO";

最终调用validate的时候，validate中的方法名是dateISO。

下载