大家好，我是IT修真院郑州分院第八期的学员，今天给大家分享一下，题目ANGULAR JS常用指令 NG-BLUR、NG-CHANGE、NG-FOCUS、NG-DISABLED是如何运用到表单验证中的？
一、背景介绍
表单验证是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> 元素都支持该指令。
三、常见问题
如何使用上面的指令实现表单验证
四、解决方案
五、编码实战
六、拓展思考
上面这些与ng-message相比的区别和优缺点在哪里？
Ng-message可以直接在html文件中完成表单验证，做简单的表单验证像，字符长度等使用起来是比较方便的；指令设定了表单验证的触发条件，使用表达式判断的可以做复杂的验证，同时也增加了代码量。
七、参考文献
菜鸟教程
八、更多讨论
讨论一： 原生onfocus事件和ng-focus执行的先后顺序？
原生onfocus事件执行在前，ng-focus指令执行在后。
讨论二： ng-blur是失焦事件,当失焦以后再次获取焦点的时候会触发失焦事件吗?
失焦事件只会在失去焦点的时候触发，失去焦点再次获取焦点的时候不会触发失焦事件。
讨论三： 小课堂里失焦事件一直存在的原因
Demo中给触发事件后返回的信息进行了双向绑定，正常情况下，失焦事件消失之后提示信息也会消失的，加了双向绑定之后，除非下一次失焦事件发生返回信息发生变化，否则提示信息会一直存在的。
感谢大家观看！
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
获得更多IT技能，请移步官网点击链接直达：http://www.jnshu.com/login/1/22893921