如何使用 jQuery Validate 的 Angular 实现来应用 class 级别验证规则

Question

我已经使用了 jQuery Validate 的得心应手 addClassRules function to apply a rule to all elements of a given class rather than relying on the elements' name attribute values. In using the Angular wrapper of jQuery Validate，我发现 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 :(
    });

错误是as follows:

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

Answer 1

I have used jQuery Validate's handy addClassRules function to apply a rule to all elements of a given class ...

这不是 .addClassRules() 方法要解决的问题。它用于将多个标准规则组合成一个单个 "compound" 规则，可以使用 one class 名称应用。

Or, is there a better way to apply validation rules to multiple elements on something other than the name attribute?

如果您只想应用使用 class 名称的个别规则，该插件足够智能，可以选择这些规则，不需要特殊的技术或方法。

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

通过简单地使用 required 和 email classes，您已经自动将 required 和 email 规则应用到该字段。

演示：jsfiddle.net/70g6brcf/

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

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

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

注意：这些只是应用规则的替代方法。 These methods do not negate the requirement to have a name attribute, which is mandatory when using jQuery Validate.

如何使用 jQuery Validate 的 Angular 实现来应用 class 级别验证规则

How to apply class level validation rules using the Angular implementation of jQuery Validate

javascript

jquery

angularjs

jquery-validate

angular-validation

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