在用户离开字段后验证字段 [英] Validate fields after user has left a field

问题描述

使用 AngularJS，我可以使用 ng-pristine 或 ng-dirty 来检测用户是否进入了该字段.但是，我只想在用户离开字段区域后进行客户端验证.这是因为当用户输入诸如电子邮件或电话之类的字段时，在他们完成完整的电子邮件输入之前，他们总是会收到错误消息，而这并不是最佳的用户体验.

With AngularJS, I can use ng-pristine or ng-dirty to detect if the user has entered the field. However, I want to do client-side validation only after the user has left the field area. This is because when a user enters a field like e-mail or phone, they will always get an error thrown until they've completed typing out their full e-mail, and this is not an optimal user experience.

示例

更新:

Angular 现在附带一个自定义模糊事件:https://docs.angularjs.org/api/ng/directive/ngBlur

Angular now ships with a custom blur event: https://docs.angularjs.org/api/ng/directive/ngBlur

推荐答案

Angular 1.3 现在有 ng-model-options，你可以将选项设置为 { 'updateOn': 'blur'}例如，你甚至可以去抖动，当用户输入太快，或者你想保存一些昂贵的 DOM 操作时(比如一个模型写入多个 DOM 位置，你不希望 $digest 循环发生在每个键下)

Angular 1.3 now has ng-model-options, and you can set the option to { 'updateOn': 'blur'} for example, and you can even debounce, when the use is either typing too fast, or you want to save a few expensive DOM operations (like a model writing to multiple DOM places and you don't want a $digest cycle happening on every key down)

https://docs.angularjs.org/guide/forms#custom-triggers 和 https://docs.angularjs.org/guide/forms#non-immediate-debounced-model-更新

默认情况下，对内容的任何更改都会触发模型更新和表单验证.您可以使用ngModelOptions 指令仅绑定到指定的事件列表.IE.ng-model-options="{ updateOn: 'blur' }" 将更新和验证只有在控件失去焦点之后.您可以使用一个设置多个事件空格分隔的列表.IE.ng-model-options="{ updateOn: 'mousedown模糊'}"

By default, any change to the content will trigger a model update and form validation. You can override this behavior using the ngModelOptions directive to bind only to specified list of events. I.e. ng-model-options="{ updateOn: 'blur' }" will update and validate only after the control loses focus. You can set several events using a space delimited list. I.e. ng-model-options="{ updateOn: 'mousedown blur' }"

去抖动

您可以使用 debounce 键延迟模型更新/验证使用 ngModelOptions 指令.此延迟也适用于解析器、验证器和模型标志，如 $dirty 或 $pristine.

You can delay the model update/validation by using the debounce key with the ngModelOptions directive. This delay will also apply to parsers, validators and model flags like $dirty or $pristine.

即ng-model-options="{ debounce: 500 }" 会等待半秒自触发模型更新之前的最后一次内容更改以来表单验证.

I.e. ng-model-options="{ debounce: 500 }" will wait for half a second since the last content change before triggering the model update and form validation.

这篇关于在用户离开字段后验证字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！