0

我使用 jQuery Validate 方便的addClassRules函数将规则应用于给定类的所有元素，而不是依赖于元素的name属性值。在使用jQuery Validate 的 Angular 包装器时，我发现该addClassRules功能不支持开箱即用。我尝试修改angular-validate.js以引入此功能，但没有运气。该文件很小，所以我将在下面粘贴整个内容以及我的修改。如果您愿意，请跳到最后的 TL；DR。

angular-validate.js（有一处修改）

(function (angular, $) {
    angular.module('ngValidate', [])

        .directive('ngValidate', function () {
            return {
                require: 'form',
                restrict: 'A',
                scope: {
                    ngValidate: '='
                },
                link: function (scope, element, attrs, form) {
                    var validator = element.validate(scope.ngValidate);
                    form.validate = function (options) {
                        var oldSettings = validator.settings;
                        validator.settings = $.extend(true, {}, validator.settings, options);
                        var valid = validator.form();
                        validator.settings = oldSettings; // Reset to old settings
                        return valid;
                    };
                    form.numberOfInvalids = function () {
                        return validator.numberOfInvalids();
                    };
                }
            };
        })

    .provider('$validator', function () {
        $.validator.setDefaults({
            onsubmit: false // to prevent validating twice
        });

        return {
            setDefaults: $.validator.setDefaults,
            addMethod: $.validator.addMethod,
            addClassRules: $.validator.addClassRules, /*<< this is the line I added >>*/
            setDefaultMessages: function (messages) {
                angular.extend($.validator.messages, messages);
            },
            format: $.validator.format,
            $get: function () {
                return {};
            }
        };
    });
}(angular, jQuery));

如果我真的尝试addClassRules在代码中调用该函数，我只会得到一个错误。例如：

angular.module("PageModule", ['ngValidate'])
    .config(function($validatorProvider) {
        $validatorProvider.setDefaults({
            errorClass: "error custom-error-class" // this works fine
        })
        $validatorProvider.addMethod("customValidationMethod", function (value) {
                var isValid = false;
                // do stuff
                return isValid;
            }, "Bleh"
        ); // this works fine too
        $validatorProvider.addClassRules("emailField", {
            email: true
        }); // this crashes :(
    });

错误如下：

Chrome JS 控制台中的 Angular Validate 错误

有没有办法让我addClassRules在其Angular 实现中使用 jQuery Validate 的功能？我可能需要进行哪些修改？或者，有没有更好的方法将验证规则应用于name属性以外的多个元素？

4

1 回答 1

1

我已经使用 jQuery Validate 的便捷addClassRules功能将规则应用于给定类的所有元素...

这不是该.addClassRules()方法要解决的问题。它用于将多个标准规则组合成一个可以使用一个类名应用的“复合”规则。

或者，有没有更好的方法将验证规则应用于name属性以外的多个元素？

如果您只是想使用类名应用单个规则，该插件足够聪明，可以选择这些规则，并且不需要特殊的技术或方法。

<input type="text" class="required email" name="foo" ...

通过简单地使用requiredandemail类，您已经自动将requiredandemail规则应用于该字段。

演示： jsfiddle.net/70g6brcf/

或者，您可以使用 HTML5 属性，插件将相应地应用规则。

<input type="email" required="required" name="foo" ...

演示： jsfiddle.net/70g6brcf/1/

注意：这些只是应用规则的替代方法。 这些方法不会否定具有name属性的要求，这在使用 jQuery Validate 时是强制性的。

于 2017-01-18T22:30:23.443 回答