javascript - 用户离开字段后立即显示 AngularJS Bootstrap 工具提示以进行客户端验证

Question

请注意，我已经阅读过 Enable angular-ui tooltip on custom events而且，虽然很接近，但并不完全符合我的要求。

这是我所得到的:

http://plnkr.co/edit/12R5eIj2v8nEj8LNVKr1?p=preview

需要根据实际错误以某种方式更新错误消息(我的代码只有未满足最小长度的消息)。另外，希望在他们第一次输入时以某种方式弹出不同的工具提示，以便在填写表单时提供一些有用的建议。

这是我想要的(至少):

1. 用户单击或按 Tab 键进入某个字段(例如密码)，然后开始输入。他只输入四 (4) 个字符，然后按 Tab 键退出该字段。因为 4 小于我们的最小值 8(由输入上的 ng-minlength="8"强制执行)，所以工具提示应显示在字段的右侧。
   1. 此工具提示应保持可见，直到用户纠正错误为止；他不应该离开该字段以使工具提示消失。
   2. 如果用户离开该字段，工具提示应保持可见(直到他重新访问/更正错误)。
2. 其他错误，例如密码太长、不包含正确的字符等，应在适用时显示在工具提示中。
   1. 假设用户有 8 个字符，但它们都是小写(并且该模式需要混合使用大写、小写和数字)——工具提示应显示“您的密码必须至少包含以下各项之一”以下内容:小写字母、大写字母和数字。”
   2. 目前通过基线 AngularJS 验证完成此操作的方法是添加类似 <p ng-show="formName.password.$error.pattern" 的内容。除了 <p ng-show="formName.password.$error.minlength" class="help-block">等等

这里有一些不错的东西:

1. 有错误的字段(因此工具提示显示在右侧)会以红色边框显示。
2. 对于需要解释的字段，一旦输入该字段，就会显示另一个/不同的信息工具提示；在显示此工具提示之前，用户不必输入任何内容，也不必离开该字段。
   1. 此工具提示将简单地解释用户应在该字段中执行的操作，例如“您的密码应至少包含 8 个字符，并且必须至少包含以下内容之一:小写字母、大写字母和数字”。解释是可选的，并非所有字段都有。
   2. 请记住，此文本虽然与错误文本类似，但不同是同一文本。当长度出现错误时，我们会这样说，例如“您的密码至少需要 8 个字符。”

编辑:显然，一位评论者不清楚我自己尝试过这样做但失败了。在我发布的链接(即“在自定义事件上启用 angular-ui 工具提示”)中，有一个示例工具提示触发器，内容如下:tooltip-trigger="{{{true: 'mouseenter', false: 'never'}[myForm.username.$invalid]}}" 。正如我在该问题中评论的那样，这个问题是用户必须单击返回到该字段才能查看工具提示。相反，为了直观起见，它应该在用户离开字段后立即出现。

Answer 1

It should instead, to be intuitive, appear as soon as the user leaves the field.

然后使用模糊代替焦点:

tooltip-trigger="{{{true: 'blur', false: 'never'}[registerForm.password.$invalid]}}"

您还可以使用 keyup 在现场时立即显示它，但它不是那么流畅，因为它不断重新渲染(可以使用 ng-model-options debounce 稍微缓解一下) )