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>

这一切都按预期工作，但由于错误消息＆＃34;需要有效的电子邮件，因此提供了可怕的用户体验＆＃34;将在用户输入＆＃34;。＆＃34;时显示。然后在用户继续输入时隐藏。因为电邮@电子邮件。无效，但email@email.com有效。

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

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

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

Answer 1

您可以通过指定ng-model-options="{updateOn:'blur'}"来使用ng-model-options指定模型更新何时发生（并最终验证）模糊事件。 您也可以在应用级别提供此功能，以便适用于每个ng-model 。当用户将焦点从输入中移出时，这将导致验证和模型更新触发。它也有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>

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

Angularjs电子邮件验证过火了吗？

2 个答案: