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

大家好，我是IT修真院深圳分院第4期学员梁耀，一枚正直纯洁善良的web程序员。

今天给大家分享：angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的？

【js-08】

分享人：梁耀

背景介绍

我们在获取用户输入值的时候，有一个必要的环节就是进行表单验证，javascript有一些好用的 表单验证功能，但是也存在一些问题，比如进行简单的事件监听往往需要写大量的获取数据以及 数据呈现的代码；

angular在数据获取、动态绑定、页面呈现等方面有很大的优势，可以将大量繁多的代码 进行简化，在表单验证方面，angular也有其特殊的优势

知识剖析

NG-BLUR

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

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

NG-FOCUS

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

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

NG-CHANGE

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

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

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

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

NG-DISABLE

ng-disabled 指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。 如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。

常见问题

如何使用pattern自定义表单验证？

解决方案

pattern 属性仅适用于 input 元素。它允许我们利用 正则表达式 (RegEx) 制定自己的验证规范验证输入值。 同样的，如果输入值与指定的模式不匹配，将会抛出错误信息

参考文献

参考一 : 菜鸟联盟

参考二： pattern--HTML5的表单验证属性

Q1：

A1：（在视频里）

Q2：

A2：novalidate 属性规定当提交表单时不对其进行验证。

如果使用该属性，则表单不会验证表单的输入。（使用自定义的表单验证等）

Q3：

A3:ng-click这是angular点击是事件的指令，相对于原生js的click指令

有点击事件发生的都有使用到，常见的确定、上传、跳转等等

Q4:

A4：优点：

1. 模板功能强大丰富，并且是声明式的，自带了丰富的Angular指令；

2. 是一个比较完善的前端MV*框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能；

3. 自定义Directive，比jQuery插件还灵活，但是需要深入了解Directive的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，我们可以通过阅读源代码来找到某些我们需要的东西，如：在directive使用 $parse；

4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助，我们的项目从上线到目前，UI变化很大，在摸索中迭代产品，但是js的代码基本上很少改动。

Q5:

A5:http://www.cnblogs.com/why520crazy/p/w5cValidator.html

这里有徐海峰老师的一篇文章，写的很有深度