angularjs – 如何禁用角度类型=电子邮件验证?

前端之家收集整理的这篇文章主要介绍了angularjs – 如何禁用角度类型=电子邮件验证?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
您将如何去禁用或至少改变Angular如何验证type = email输入?

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

我可以找到最好的是ng模式,但是ng模式只是为输入类型添加了第三种模式验证,而不是替换Angular的电子邮件验证.嘿嘿

有任何想法吗?

注意:这是例如角1.2.0-rc.3.其他版本的内容可能会有所不同

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

以下是验证添加了所需验证器的电子邮件字段的示例.我已经添加代码来解释发生了什么.

输入元素

<input type="email" @R_403_103@>

指示

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 @R_403_103@ 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('@R_403_103@',function () {
  var self = {
      // @R_403_103@ 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,controller) {
        var validate@R_403_103@ = function (value) {
          if (value) {
            // it is valid
            controller.$setValidity('@R_403_103@',true);
            return value;
          } else {
            // it is invalid,return undefined (no model update)
            controller.$setValidity('@R_403_103@',false);
            return undefined;
          }

        };
        controller.$parsers.push(validate@R_403_103@);
      }
  };
  return self;
})
;

你有它您现在可以控制type =“email”输入验证.请使用正确的正则表达式来测试电子邮件.

需要注意的是,在此示例中,validateEmail在validate@R_403_103@之前运行.如果您需要validate@R_403_103@在任何其他验证之前运行,那么只需将其添加到$parsers数组(使用unshift而不是push)即可.

原文链接:https://www.f2er.com/angularjs/143194.html

猜你在找的Angularjs相关文章