AngularJS / 验证电子邮件唯一性时的奇怪行为

AngularJS / Strange behavior while validating email uniqueness

本文关键字：验证 电子邮件 唯一性 AngularJS      更新时间：2023-09-26

我有一个由Angular控制的表单，我希望它能知道潜在的重复用户的电子邮件。

我关心的代码在那里：http://plnkr.co/edit/XQeFHJTsgZONbsrxnvcI

它包含两个指令：

  • ngFocus ：能够获得任何输入是否聚焦或模糊的信息。 它还会注意hasVisited变量，以避免在用户至少一次未到达输入时验证blur上的输入。
  • emailUnique ：与已经存在的邮件（硬编码）执行简单的比较，以便能够验证或不验证email输入。

重点是：（不要忘记放置"选项卡"触摸以执行blur函数以查看字段的验证错误）

  • 如果我什么都不输入并转到名称输入（模糊电子邮件输入），它会显示：该字段是必填字段。很好。
  • 如果我输入一封无效的电子邮件，如字符串"ferfergre"，它会显示：此电子邮件无效。很好。
  • 如果我输入与现有硬编码电子邮件不同的有效电子邮件：（michael@gmail.com），则不会显示任何错误。很好。
  • 如果我输入现有邮件：michael@gmail.com，它会显示：此电子邮件已存在。这很好，因为它警告它。
  • 但是，如果在 DOM 周期中至少有一次电子邮件被判断为"此电子邮件已经存在"，那么即使我将其更改为新的有效电子邮件，此错误仍然存在......

问：最后一个案件如何处理？

我有两个假设：

  • HTML 属性的顺序很重要：autofocus email-unique ng-focus required
  • emailUnique指令代码中的setValidity方法避免再次$valid ctrl，然后防止再次执行邮件比较。

只需从解析器函数中删除此代码片段：

if(!ctrl.$valid){
    return viewValue;
}

此代码阻止再次执行邮件比较。

有了这个代码段，它下面的代码（进行比较）将仅在控件有效时运行，但如果控件无效，则永远不会运行。

更新的弹道机：http://plnkr.co/edit/6q3cANiFI4vpWcVEHRvo?p=preview

<小时 />

编辑（更好的选择）：

如果您不想在电子邮件字段对其他规则（"必需"和"电子邮件"）无效时执行比较，则还需要检查ctrl.$error。不要删除上面提到的代码段，只需将其更改为：

if(!ctrl.$valid && !ctrl.$error.emailUnique){
    return viewValue;
}

这样，仅当控件无效但由于其他规则（不是 emailUnique）而返回时，它才会返回。

更新的弹道机：http://plnkr.co/edit/IDQitVkeHHDyJlcsatMy?p=preview

相关文章：