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

发布时间：2020-12-17 09:09:49 所属栏目：安全来源：网络整理

导读：示例： http://plnkr.co/edit/E6l6GOkKOEuVO1iz0fjU?p=preview 使用AngularJS，我可以使用ng-pristine或ng-dirty来检测用户是否已输入字段。但是，我想在用户离开字段区域后才进行客户端验证。这是因为当用户输入电子邮件或电话等字段时，他们总是会收到一个

示例： 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-triggers和https://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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!