【小课堂【顺义】

angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单的？

分享人：张晓琳

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1. 背景介绍

什么是表单验证？

表单验证是javascript中的高级选项之一。JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

2. 知识剖析

常见的表单验证有哪些？

比如登陆页面的账号和密码，我们可以限制账号和密码的长度，可以限制他不可以为空

比如我们在某些平台实名认证的时候，姓名，身份证号，手机号必填

3. 常见问题

如何实现表单验证呢？？

4. 解决方案

h5自带表单验证

jQuery的表单验证

angular表单验证

angular表单验证中的ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的

1、ng-blur 指令用于告诉 AngularJS HTML 元素在失去焦点时需要执行的表达式。

AngularJS 中的 ng-blur 指令不会覆盖原生的 onblur 事件， 如果触发该事件，ng-blur 表达式与原生的 onblur 事件都会执行。

2、ng-focus 指令用于告诉 AngularJS 在 HTML 元素获取焦点时需要执行的操作。

ng-focus 指令不会覆盖元素的原始 onfocus 事件, 事件触发时，ng-focus 表达式与原始的 onfocus 事件将都会执行。

3、ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作。

ng-change 指令需要搭配 ng-model 指令使用。

AngularJS ng-change 指令不会覆盖原生的 onchange 事件, 如果触发该事件，ng-change 表达式与原生的 onchange 事件都会执行。

ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作

ng-change 事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改。

4、ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。

如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。

5. 编码实战

6.扩展思考

还有哪些表单验证的方式？

7. 参考文献

8. 更多讨论

鸣谢

感谢大家观看

By 张晓琳