Angularjs 如何禁用angulars type=电子邮件验证？

您将如何禁用或至少更改Angular验证type=电子邮件输入的方式

目前，如果您使用type=email，则会进行双重验证。。当浏览器（本例中为Chrome）验证电子邮件时，angular也会验证。不仅如此，在Chrome

foo@bar

在Angularjs中无效

我能找到的最好的方法是

ng模式

，但是

ng模式

只是为输入类型添加了第三个模式验证。。而不是取代Angular的电子邮件验证。呵呵

---

有什么想法吗？

在HTML5上，您可以使用表单的属性

novalidate

来禁用浏览器的验证：

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

<form novalidate>
    <input type="email" model="email" class="form-control" valid-email>

---

如果您想在angularjs中创建自定义验证程序，这里有一个很好的教程和示例：

在我的项目中，我会这样做（自定义指令会删除所有其他验证，包括angularjs安装的验证）：

如何使用它（注意

novalidate

，需要关闭浏览器验证）：

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

正如其他人所说，关闭angulars默认输入验证有点复杂。您需要将自己的指令添加到输入元素并在其中处理事情。是正确的，但是如果您需要元素上的多个验证器，并且不希望启动内置验证器，则会出现一些问题

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

输入元素

指示

angular.module（'myValidations'，[]）
.directive（'input'，function（）{
var self={
//我们使用？ngModel，因为不是所有的输入元素
//指定模型，例如type=“submit”
要求：“？ngModel”
//我们需要将优先级设置为高于基数0，否则
//内置指令仍将应用
，优先次序：1
//将此指令限制为元素
，限制：'E'
，链接：函数（范围、元素、属性、控制器）{
//如上所述，控制器可能不存在
if（控制器）{
//在这种情况下，我们只想覆盖电子邮件验证
如果（attrs.type==='email'）{
//清除此元素$parsers和$formatters
//注意：这将禁用*所有*以前设置的解析器
//和此元素的验证器。小心！
控制器。$parsers=[]；
控制器。$formatters=[]；
//此函数处理实际验证
//有关如何编写自定义验证器，请参见angular文档
// http://docs.angularjs.org/guide/forms
//
//在本例中，我们不打算实际验证电子邮件
//由于正则表达式可能非常长，所以请应用您自己的规则
var validateEmail=函数（值）{
日志（“验证为电子邮件”，值）；
if（controller.$isEmpty（value）| |/@/.test（value））{
控制器.$setValidity（'email'，true）；
返回值；
}否则{
控制器.$setValidity（'email'，false）；
返回未定义；
}
};
//将验证器添加到$parser和$formatters
控制器.$parsers.push（validateEmail）；
控制器.$formatters.push（validateEmail）；
}
}
}
};
回归自我；
})
//定义我们所需的指令。这是一个相当高的标准
//验证指令，但其优先级除外。
//所有验证指令都必须采用类似的方法
//您可能希望与我们的'input'指令一起使用
.directive（'required'，function（）{
var self={
//“必需”应始终应用于模型图元
要求：'ngModel'
，限制：'A'
//优先级必须高于'input'指令
//或者在运行该指令时将其删除
，优先次序：2
，链接：函数（范围、元素、属性、控制器）{
var validateRequired=函数（值）{
如果（值）{
//它是有效的
控制器.$SETVALITY（'required'，true）；
返回值；
}否则{
//无效，返回未定义（无模型更新）
控制器.$setValidity（'required'，false）；
返回未定义；
}
};
控制器.$parsers.push（需要验证）；
}
};
回归自我；
})
;

给你。您现在可以控制输入验证。请使用适当的正则表达式来测试电子邮件

---

需要注意的一点是，在本例中，

validateEmail

在

validateRequired

之前运行。如果您需要在任何其他验证之前运行

validateRequired

，则只需将其预先添加到

$parsers

数组中（使用

unshift

而不是

push

）。

非常简单。我必须修改email regex以满足业务需求，因此我制定了这个指令，使email regex可定制。它实质上用我的自定义验证器覆盖了原始验证器。您不必处理所有的$parser和$formatter（除非我遗漏了什么）。所以我的指令是

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=".+@.+\..+"/>

然后像这样使用它

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

回显，您不需要使用

$parsers

或

$formatters

来覆盖默认验证程序。如中所述，$validators对象可在ngModelController上访问。使用自定义指令，您可以根据需要编写和调用任意多个不同的电子邮件验证函数

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>

var app = angular.module('myApp', []);

app.directive('customEmailValidate', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {

      var EMAIL_REGEXP = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

      ctrl.$validators.email = function(modelValue, viewValue) {
        if (ctrl.$isEmpty(modelValue)) {
          // consider empty models to be valid
          return true;
        }

        if (EMAIL_REGEXP.test(viewValue)) {
          // it is valid
          return true;
        }

        // it is invalid
        return false;
      };
    } 
  };
});

var app = angular.module('myApp', []);

app.directive('noValidation', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$validators.email = function(modelValue, viewValue) {
        // everything is valid
        return true;
      };
    } 
  };
});

<!-- 'test@example.com' is valid, '@efe@eh.c' is invalid -->
<input type="email" custom-email-validate>

<!-- both 'test@example.com' and '@efe@eh.c' are valid -->
<input type="email" no-validation>