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

大家好，我是IT修真院武汉分院第13期学员，一枚正直善良的web程序员。

今天给大家分享一下：

一、背景介绍

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

angularjs中表单验证的方法，除了ng-message之外还有ng-blur、ng-change、ng-focus和ng-disabled。

angularjs中表单验证的方法，除了ng-message之外还有ng-blur、ng-change、ng-focus和ng-disabled。

---

二、知识剖析

１．NG-BLUR

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

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

语法:<element ng-blur="expression">

< a >, < input >, <select >, < textarea >,窗口对象支持

2. NG-FOCUS

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

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

语法：<element ng-focus="expression">< /element>

< a>, < input>, <select>, < textarea>, 和 window 对象都支持该指令。

3. 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> 元素支持。

4. NG-DISABLED

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

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

语法:<input ng-disabled="expression">< /input>

<input>, < select>, 和 < textarea> 元素都支持该指令。

问题：

Q1:上面这些与ng-message相比的区别和优缺点在哪里？

A1:Ng-message可以直接在html文件中完成表单验证，做简单的表单验证像，字符长度等使用起来是比较方便的；指令设定了表单验证的触发条件，使用表达式判断的可以做复杂的验证，同时也增加了代码量。

Q2: 原生onfocus事件和ng-focus执行的先后顺序？

A2:原生onfocus事件执行在前，ng-focus指令执行在后。

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

A3:l失焦事件只会在失去焦点的时候触发，失去焦点再次获取焦点的时候不会触发失焦事件。

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树-IT修真院

IT修真院是一个免费的线上IT技术学习平台 。

每个职业以15个左右的task为初学者提供更快速高效的学习方式 ；

所有task均是从真实项目中提炼出来的技能点，

强调实战演练+自学优先+师兄辅导的学习方式，

严格的日报体系，欢乐的交流讨论学习气氛，更有无数师兄师姐帮你解疑

---

三、常见问题

如何使用上面的指令实现表单验证