如何禁用angulars类型=电子邮件验证？

Question

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

目前,如果你使用type = email,Angular本质上是双重验证..因为浏览器(在这种情况下是Chrome)验证电子邮件,然后angular也是.不仅如此,Chrome foo@bar中的有效内容在Angularjs中无效.

我能找到的最好的,是ng-pattern,但ng-pattern只是为输入类型添加第三个模式验证..而不是取代Angular的电子邮件验证.嘿嘿

有任何想法吗？

Answer 1

注意:这是角度1.2.0-rc.3的示例.其他版本的情况可能会有所不同

像其他人一样,关闭角度默认输入验证有点复杂.您需要将自己的指令添加到input元素并处理其中的内容.谢尔盖的答案是正确的,但是如果你需要在元素上使用多个验证器并且不希望触发内置验证器,它会出现一些问题.

以下是验证添加了必需验证程序的电子邮件字段的示例.我在代码中添加了注释来解释发生了什么.

输入元素

<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).

Answer 2

非常简单.我不得不改变电子邮件正则表达式以匹配业务需求,所以我制定了这个指令,使电子邮件正则表达式可以自定义.它基本上用我的自定义覆盖原始验证器.你不必乱用所有$ parsers和$ formatters(除非我遗漏了什么).所以我的指示就是......

module.directive('emailPattern', function(){
    return {
        require : 'ngModel',
        link : function(scope, element, attrs, ngModel) {

            var EMAIL_REGEX = new RegExp(attrs.emailPattern, "i");

            ngModel.$validators["email"] = function (modelValue, viewValue) {
                var value = modelValue || viewValue;
                return ngModel.$isEmpty(value) || EMAIL_REGEX.test(value);
            };
        }
    }
});

然后像这样使用它,提供你个人想要的任何电子邮件模式:

<input type="email" email-pattern=".+@.+\..+"/>

但是,如果你只想永久禁用它,那么你可以这样做.

module.directive('removeNgEmailValidation', function(){
    return {
        require : 'ngModel',
        link : function(scope, element, attrs, ngModel) {
            ngModel.$validators["email"] = function () {
                return true;
            };
        }
    }
});

然后像这样使用它......

<input type="email" remove-ng-email-validation>

Answer 3

在HTML5上,您可以使用表单的属性novalidate来禁用浏览器的验证:

<form novalidate>
    <input type="email"/>
</form>

如果你想在angularjs中创建一个自定义验证器,你有一个很好的教程和例子:http://www.benlesh.com/2012/12/angular-js-custom-validation-via.html