AngularJS表单 – 在用户具有字段后验证字段

前端之家收集整理的这篇文章主要介绍了AngularJS表单 – 在用户具有字段后验证字段前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
示例: http://plnkr.co/edit/E6l6GOkKOEuVO1iz0fjU?p=preview

使用AngularJS,我可以使用ng-pristine或ng-dirty来检测用户是否已输入字段。但是,我想在用户离开字段区域后才进行客户端验证。这是因为当用户输入电子邮件或电话等字段时,他们总是会收到一个错误,直到他们完成输出完整的电子邮件,这不是一个最佳的用户体验。

更新:

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

Angular 1.3现在有ng-model-options,你可以将选项设置为{‘updateOn’:’blur’},例如,你甚至可以去反弹,当使用输入太快,或者你想保存几个昂贵的DOM操作(如一个模型写入多个DOM地方,你不希望在每个键下发生$ digest周期)

https://docs.angularjs.org/guide/forms#custom-triggershttps://docs.angularjs.org/guide/forms#non-immediate-debounced-model-updates

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’ }”

和去抖

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.

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.

猜你在找的Angularjs相关文章