如何禁用 angulars type=email 验证? [英] How to disable angulars type=email validation?

问题描述

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

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

目前，如果您使用 type=email，Angular 基本上会双重验证……因为浏览器(在本例中为 Chrome)会验证电子邮件，然后 angular 也会验证.不仅如此，Chrome foo@bar 中有效的内容在 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-pattern，但是 ng-pattern 只是为输入类型添加了 3rd 模式验证.. 而不是替换 Angular 的电子邮件验证.呵呵

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

有什么想法吗?

推荐答案

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

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

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.

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

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

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

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

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

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 type=email 验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！