angularjs - 如何禁用 angulars type=email 验证？

Question

您将如何禁用或至少更改 Angular 验证 type=email 输入的方式？

目前，如果您使用 type=email，Angular 基本上会双重验证……因为浏览器(在本例中为 Chrome)会验证电子邮件，然后 angular 也会验证。不仅如此，还有什么在 Chrome 中有效 foo@bar在 Angularjs 中无效。

我能找到的最好的是 ng-pattern ，但是 ng-pattern只需为输入类型添加第三个模式验证.. 而不是替换 Angular 的电子邮件验证。呵呵

有任何想法吗？

Answer 1

注意:这是 angular 1.2.0-rc.3 的示例。在其他版本上，事情可能会有所不同

就像其他人所说的那样，关闭 angulars 默认输入验证有点复杂。您需要将自己的指令添加到输入元素并处理其中的内容。 Sergey's answer是正确的，但是如果您需要在元素上使用多个验证器并且不希望内置验证器触发，则会出现一些问题。

这是验证添加了必需验证器的电子邮件字段的示例。我在代码中添加了注释来解释发生了什么。

输入元素

<input type="email" required>

指示

angular.module('myValidations', [])

.directive('input', function () {
  var self = {
      // we use ?ngModel since not all input elements 
      // specify a model, e.g. type="submit" 
      require: '?ngModel'
      // we need to set the priority higher than the base 0, otherwise the
      // built in directive will still be applied
    , priority: 1
      // restrict this directive to elements
    , restrict: 'E'
    , link: function (scope, element, attrs, controller) {
        // as stated above, a controller may not be present
        if (controller) {

          // in this case we only want to override the email validation
          if (attrs.type === 'email') {
            // clear this elements $parsers and $formatters
            // NOTE: this will disable *ALL* previously set parsers
            //       and validators for this element. Beware!
            controller.$parsers = [];
            controller.$formatters = [];

            // this function handles the actual validation
            // see angular docs on how to write custom validators
            // http://docs.angularjs.org/guide/forms
            //
            // in this example we are not going to actually validate an email
            // properly since the regex can be damn long, so apply your own rules
            var validateEmail = function (value) {
              console.log("Validating as email", value);
              if (controller.$isEmpty(value) || /@/.test(value)) {
                controller.$setValidity('email', true);
                return value;
              } else {
                controller.$setValidity('email', false);
                return undefined;
              }
            };

            // add the validator to the $parsers and $formatters
            controller.$parsers.push(validateEmail);
            controller.$formatters.push(validateEmail);
          }
        }
      }
  };
  return self;
})

// define our required directive. It is a pretty standard
// validation directive with the exception of it's priority.
// a similar approach must be take with all validation directives
// you would want to use alongside our `input` directive
.directive('required', function () {
  var self = {
      // required should always be applied to a model element
      require: 'ngModel'
    , restrict: 'A'
      // The priority needs to be higher than the `input` directive
      // above, or it will be removed when that directive is run
    , priority: 2
    , link: function (scope, element, attrs, controller) {
        var validateRequired = function (value) {
          if (value) {
            // it is valid
            controller.$setValidity('required', true);
            return value;
          } else {
            // it is invalid, return undefined (no model update)
            controller.$setValidity('required', false);
            return undefined;
          }

        };
        controller.$parsers.push(validateRequired);
      }
  };
  return self;
})
;

你有它。您现在可以控制 type="email"输入验证。不过，请使用适当的正则表达式来测试电子邮件。

需要注意的一件事是在这个例子中 validateEmail在 validateRequired 之前运行.如果您需要 validateRequired在任何其他验证之前运行，然后将其添加到 $parsers数组(使用 unshift 而不是 push )。