1

我正在尝试验证 angularjs 中的电子邮件字段，如下所示：

<input type="email" ng-model="email" class="form-control" name="email" ng-required="true" placeholder="Email Address">
<span ng-show="loginForm.email.$touched && loginForm.email.$invalid">A valid email is required</span>

这一切都按预期工作，但由于用户键入“. 然后在用户继续输入时隐藏。因为电子邮件@电子邮件。无效，但 email@email.com 有效。

问题是验证发生得太快，在用户完成输入之前。

我试图通过使用 $touched 标志来解决这个问题，但它仅在用户第一次输入电子邮件时解决。当他们回去更正电子邮件时，他们最终会在键入“。”时弹出错误消息。或域名中的“-”。

有没有人以某种方式解决了这个问题？

4

2 回答 2

2

您可以ng-model-options通过指定ng-model-options="{updateOn:'blur'}". 您也可以在应用程序级别提供它，以便它适用于每个ng-models。这将导致在用户关注输入时触发验证和模型更新。它也有debounce选项。

 <input type="email" ng-model="email" class="form-control" name="email" 
        ng-required="true" ng-model-options="{updateOn:'blur'}" 
        placeholder="Email Address" />
  <span ng-show="loginForm.email.$touched && loginForm.email.$invalid">A valid email is required</span>


angular.module('app', []).controller('ctrl', function($scope) {

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <form name="loginForm">
    <input type="email" ng-model="email" class="form-control" name="email" ng-required="true" ng-model-options="{updateOn:'blur'}" placeholder="Email Address">
    <span ng-show="loginForm.email.$touched && loginForm.email.$invalid">A valid email is required</span>
    {{email}}
  </form>
</div>

于 2015-01-15T16:38:27.890 回答
0

我遇到了同样的问题，但我们对在输入完整电子邮件之前显示该字段无效的表单感到满意。在我的脑海中 - 您可以推迟验证直到输入字段失去焦点，或者使用带有lodash 的 debounce 函数之类的自定义验证器？

于 2015-01-15T15:34:37.190 回答