发表于: 2019-02-16 20:48:37

1 470


今天完成的事情:



小课堂


明天计划的事情:


放假


遇到的问题:



收获:


【JS-TASK6】 ANGULAR JS常用指令 NG-BLUR、NG-CHANGE、NG-FOCUS、NG-DISABLED是如何运用到表单验证中的?

分享人:霍亚豪

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

表单验证

我们在获取用户输入值的时候,有一个必要的环节就是进行表单验证,javascript有一些好用的 表单验证功能,但是也存在一些问题,比如进行简单的事件监听往往需要写大量的获取数据以及 数据呈现的代码;angular在数据获取、动态绑定、页面呈现等方面有很大的优势,可以将大量繁多的代码 进行简化,在表单验证方面,angular也有其特殊的优势

2.知识剖析

 

NG-BLUR

ng-blur指令用于告诉 AngularJS HTML 元素在失去焦点时需要执行的表达式。 AngularJS中的 ng-blur 指令不会覆盖原生的 onblur 事件, 如果触发该事件,ng-blur 表达式与原生的 onblur 事件都会执行。 语法:element ng-blur="expression" < a >, < input >, (select) , < textarea >,窗口对象支持

NG-FOCUS

g-focus指令用于告诉 AngularJS 在 HTML 元素获取焦点时需要执行的操作。 ng-focus指令不会覆盖元素的原始 onfocus 事件, 事件触发时,ng-focus表达式与原始的 onfocus 事件将都会执行。 语法:element ng-focus="expression">< /element> < a>, < input>, select, < textarea>, 和 window 对象都支持该指令

NG-CHANGE

ng-change指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。 ng-change指令需要搭配 ng-model 指令使用。 AngularJSng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件,ng-change 表达式与原生的 onchange 事件都会执行。 ng-change事件在值的每次改变时触发,它不需要等待一个完成的修改过程,或等待失去焦点的动作。 ng-change事件只针对输入框值的真实修改,而不是通过 JavaScript 来修改。 语法:element ng-change="expression"< /element> < input>, < select>, 和 textarea 元素支持。

NG-DISABLED

ng-disabled指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。 如果ng-disabled 中的表达式返回 true 则表单字段将被禁用。 语法:input ng-disabled="expression">< /input> input, < select>, 和 < textarea> 元素都支持该指令。

 

3.常见问题

 

常用指令ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的?

4 解决方案

ng-blur输入框失去焦点时执行函数,一般用在表单中的注册功能,如用户名重名提示信息显示。 ng-focus输入框获取焦点时执行表达式。可用在显示提醒事项。 ng-change 则可用于需要随时验证的表单数据,如设置密码输入两次的时候。 ng-disable 可用于表单输入不合法时,提交按钮则不可按的状态

5.编码实战

DEMO

6.扩展思考

 

7.参考文献

https://blog.csdn.net/dm_vincent/article/details/38705099

8 更多讨论

Q1:提问人:原生onfocus事件和ng-focus执行的先后顺序?

A1:回答人(可以是分享人,也可以是其他学员):原生onfocus事件执行在前,ng-focus指令执行在后。

Q2:提问人:ng-blur是失焦事件,当失焦以后再次获取焦点的时候会触发失焦事件吗?

A2:回答人(可以是分享人,也可以是其他学员):失焦事件只会在失去焦点的时候触发,失去焦点再次获取焦点的时候不会触发失焦事件。Q3:提问人:小课堂里失焦事件一直存在的原因

A3:回答人(可以是分享人,也可以是其他学员):Demo中给触发事件后返回的信息进行了双向绑定,正常情况下,失焦事件消失之后提示信息也会消失的,加了双向绑定之后,除非下一次失焦事件发生返回信息发生变化,否则提示信息会一直存在的。



鸣谢

感谢大家观看

BY : 霍亚豪



返回列表 返回列表
评论

    分享到