1.背景介绍

1.1原生js表单验证的劣势

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

1.2angular js在表单验证中的优势

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

2.知识剖析

2.1ng-blur

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

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

2.2ng-focus

ng-focus 指令用于告诉 AngularJS 在 HTML 元素获取焦点时需要执行的操作ng-focus 指令不会覆盖元素的原始 onfocus 事件, 事件触发时，ng-focus表达式与原始的 onfocus 事件将都会执行。

2.3ng-change

ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作，ng-change 指令需要搭配 ng-model 指令使用。ng-change 事件在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作，ng-change 事件只针对输入框值的真实修改，而不是通过 JavaScript 来修改。

2.4ng-disable

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

3.常见问题

一般网上只给出每个方法的单独的使用方法，比较简单，但在实际的表单验证的过程中，需要将不同的方法结合起来，通过变量值来判断如何将表单验证结果呈现出来，而controller中一般设置好判断函数，跟具体的情况来改变量的值。

4.解决方案

ng-blur/ng-change/ng-focus的用法是类似的，都是当某个事件触发时，可以进行变量值变化或启用函数；

ng-disabled和ng-hide用法是类似的，都是可以改变页面呈现的效果，而效果则取决于某个变量值；

这两类方法需要通过变量配合起来使用，变量通过controller来进行控制；

5.编码实战

上图为表单验证demo的UI

我们给input输入框设置ng-blur、ng-change功能，当input失焦时，ng-blur会触发，然后启动inputCheck（）函数；同样的，当输入框内容改变时，会触发ng-minCheck（）函数。最底下两个div是提示框，设置了ng-hide指令，提示框的隐藏或显示会根据变量var1和var2的布尔值来判断。

上图为inputCheck函数，用来检验输入框输入的值是否为空 上图为minCheck函数，用来检验输入框输入的位数是否小于5 上图为给变量var1和var2设置的初始值，让提示框最初状态为隐藏 上图为失焦的时候出现了提示框 上图为输入框输入位数小于5的时候，会提示位数小于5

目前实现了基本的功能，即ng-blur事件和ng-change事件都可以正常触发，函数也可以

正常对输入框的值进行判断，但是现在依然存在一些问题：

1.ng-blur事件是在失焦之后触发，但是事件发生以后却无法改变，它自己不能再根据值的变化变回去了，

这会导致输入框在开始输入值的时候，ng-blur触发的事件依然存在

2.ng-change触发以后，如果用户最终没有任何值输入，那么ng-blur事件触发的时候，

ng-change事件留下来的提示框就不该显示了，但由于同样的原因，依旧会显示出来，

如下图所示：

上图为两种验证同时出现的bug

因此我们需要对代码再进行一波调试：

$scope.var2=true；可以保证用户在输入值为空的情况下，位数提示框就不显示了

在位数检测函数中，添加了一个if语句判断，就是加入用户已经开始输入了，那么必填项

输入框就应该消失；

调试完之后，我们的这个简单的表单验证功能就实现了

6.扩展思考

angular还有那些好用的表单验证功能？

7.参考文献

菜鸟教程

8.更多思考

ng-message有什么优势

PPT链接：https://ptteng.github.io/PPT/PPT/js-08-ng-blur%20.html#/

视频链接：https://v.qq.com/x/page/b0512gnftq5.html

【it修真院-线上小课堂】ng-blur等表单验证_腾讯视频

技能树.IT修真院

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

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

www.jnshu.com/login/1/95798135