【成都小课堂】angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的？

大家好，我是IT修真院成都分院的学员，一枚正直纯洁善良的WEB前端程序员。

今天给大家分享一下，修真院官网JS任务8，angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的？

1.背景介绍

什么事表单验证

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

2.知识剖析

常见的表单验证有哪些

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

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

3.常见问题

如何实现表单验证呢？

4.解决方案

h5自带表单验证

jQuery的表单验证

angular表单验证

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

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

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

的 onblur 事件都会执行。

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

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

事件将都会执行。

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

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

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

式与原生的 onchange 事件都会执行。

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

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

5.参考文献

菜鸟教程

H5自带表单验证

jQuery-Validate验证插件

6..更多讨论

ng-pattern表单验证的方式

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

答：

ng-class-even 指令用于为 HTML 元素动态的绑定一个或多个 CSS 类，但只作用于偶数行。

ng-class-even 指令需要与 ng-repeat 指令搭配使用。

ng-class-even 指令建议用在表格的样式渲染中，但是所有HTML元素都是支持的。

ng-class-odd 指令用于为 HTML 元素动态的绑定一个或多个 CSS 类，但只作用于奇数行。

ng-class-odd 指令需要与 ng-repeat 指令搭配使用。

ng-class-odd 指令建议用在表格的样式渲染中，但是所有HTML元素都是支持的。

答：ngMessages、ng-pattern

答：

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

如果使用该属性，则表单不会验证表单的输入。

novalidate 属性适用于：

，以及以下类型的标签：text, search, url, telephone, email, password, date pickers, range 以及 color。

鸣谢

感谢大家观看

----

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！