如何禁用angulars类型=电子邮件验证？ [英] How to disable angulars type=email validation?

问题描述

您会如何去禁止，或至少是不断变化的，如何角型验证=电子邮件投入？

How would you go about disabling, or at the very least changing, how Angular validates type=email inputs?

目前，如果你使用类型=电子邮件，角实质上是双重只会验证。作为浏览器（Chrome在这种情况下）验证的电子邮件，然后角度也会做。不仅如此，但究竟是在Chrome foo的@酒吧是有效的无效的在Angularjs。

Currently, if you use type=email, Angular essentially double validates.. as the Browser (Chrome in this case) validates the email, and then angular does too. Not only that, but what is valid in Chrome foo@bar is not valid in Angularjs.

我能找到的最好的，是 NG-模式，但 NG-模式简单地增加了的 3 的模式验证的输入类型..而不是替换角的电子邮件验证。港灯

The best i could find, is ng-pattern, but ng-pattern simply adds a 3rd pattern validation for the input type.. instead of replacing Angular's email validation. heh

任何想法？

推荐答案

的注：这是例子是角1.2.0-rc.3。事情可能不同的行为在其他版本的的

像其他人说，它是一个有点复杂关闭angulars默认输入验证。你需要自己的指令添加到输入元素和处理的事情在那里。 谢尔盖的回答是正确的，但它presents一些问题，如果你需要在元素上几个验证，并且不希望内置的验证火灾。

Like others have stated it is a bit complex to turn off angulars default input validation. You need to add your own directive to the input element and handle things in there. Sergey's answer is correct, however it presents some problems if you need several validators on the element and don't want the built in validator to fire.

下面是一个例子验证电子邮件字段添加了一个必需的验证。我已经添加了注释到code解释是怎么回事。

Here is an example validating an email field with a required validator added. I have added comments to the code to explain what is going on.

<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;
})
;

有你有它。你现在有超过控件中键入=电子邮件输入验证。请使用正确的正则表达式来虽然测试电子邮件。

There you have it. You now have control over type="email" input validations. Please use a proper regex to test the email though.

有一点需要注意的是，在这个例子中 validateEmail 是的validate- Required 之前运行。如果你需要的validate- Required 其他任何验证之前运行，那么只需$它p $ PPEND到 $解析器阵列（使用不印字而不是推）。

One thing to note is that in this example validateEmail is run before validateRequired. If you need validateRequired to run before any other validations, then just prepend it to the $parsers array (using unshift instead of push).

这篇关于如何禁用angulars类型=电子邮件验证？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！