Angular 条件电子邮件验证答案

【问题标题】：Angular conditional email validationAngular 条件电子邮件验证
【发布时间】：2014-02-17 15:37:18
【问题描述】：

如何根据另一个范围变量的存在有条件地使用 Angular 的电子邮件验证？我查看了文档，但我能找到触发电子邮件验证的唯一方法是使用input type="email"，在这种情况下，由于另一个指令对type="text" 的依赖，我无法使用它。

理想情况下，我想根据另一个范围变量的值分配 ng-match="email"，或者只是在提交时以编程方式验证电子邮件。从理论上讲，我可以只使用一个单独的电子邮件验证正则表达式，但如果可能的话，我想使用 Angular 的验证，因为我在其他任何地方都使用它。

谢谢

-- 编辑：为了澄清，我特别想在我最终使用的任何解决方案中使用 Angular 的本机电子邮件验证。

【问题讨论】：

只需为此编写一个自定义指令
是的，我知道我可以做到这一点，但是如果我走那条路，如何在该指令中使用 Angular 的本机电子邮件验证？
您可以为您的指令设置比电子邮件更高的优先级。（假设您在指令的链接功能中处理您的流程）。以便在您的自定义指令处理之前进行电子邮件验证。
好的，但我只希望在某些时候进行电子邮件验证。如果它发生在我的指令之前，它不会一直执行吗？或者，您的意思是使用第二个指令来覆盖该字段如果不是电子邮件将获得的 $invalid 设置？
如果您想要一个严格基于您的适当条件的行为，请将您的输入设为type="text"，然后在您的指令中实现一个正则表达式来模仿电子邮件。

标签： angularjs email-validation

【解决方案1】：

您应该在电子邮件输入字段中使用ng-required 和ng-pattern。

<input type="text" ng-model="email" ng-required="emailRequired" ng-pattern="emailPattern" />

然后将emailPattern 定义为控制器的$scope 上的函数。

$scope.emailPattern = (function() {
var regexp = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return {
    test: function(value) {
        if( $scope.emailRequired === false ) return true;
        else return regexp.test(value);
    }
};

})();

下面的小提琴实现了你想要的：

http://jsfiddle.net/9SSE4/

【讨论】：

对，但是不显式复制就无法使用 Angular 的正则表达式？
否，因为 Angular 的正则表达式电子邮件验证仅适用于 type="email" 的输入。
您可以直接在 Angular 的文档示例中自行尝试。这里：jsfiddle.net/5uW2U
好的，但我的问题是“我如何有条件地使用 Angular 的电子邮件验证”，而不是不同的电子邮件验证。但从你所说的看来我不能那样使用它。

【解决方案2】：

你能改变输入的类型吗？如果输入应被验证为电子邮件，则将其类型设置为电子邮件，否则将其设置为文本。

<input type="{{vm.type}}" ng-model="vm.text" />
<select ng-model="vm.type">
  <option>text</option>
  <option>email</option>

Example Plunker

【讨论】：