Angularjs 电子邮件验证触发得太快？

Question

我正在尝试验证 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>

一切都按预期工作，但由于错误消息 "A valid email is required" 会在用户键入“.”时显示，因此呈现出糟糕的用户体验。然后会在用户继续输入时隐藏。因为电子邮件@电子邮件。无效，但电子邮件@email.com 有效。

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

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

有人解决过这个问题吗？

Answer 1

我运行遇到了同样的问题，但我们很高兴在输入完整的电子邮件之前，表单将字段显示为无效。在我的脑海中——你可以推迟验证，直到输入字段失去焦点，或者使用自定义验证器，比如 lodash's debounce function?

Answer 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>

Angularjs 电子邮件验证触发得太快？

Angularjs email validation fires too quickly?

html

angularjs

angularjs-ng-model

angularjs-validation