【it修真院小课堂第132期】angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的?

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 226,728评论 6 526
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 97,623评论 3 411
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 174,371评论 0 372
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 62,174评论 1 306
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 71,014评论 6 405
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 54,532评论 1 319
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 42,641评论 3 433
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 41,793评论 0 283
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 48,294评论 1 329
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,276评论 3 352
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,423评论 1 364
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 37,980评论 5 354
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 43,678评论 3 342
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,087评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,307评论 1 279
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 50,997评论 3 385
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 47,404评论 2 370

推荐阅读更多精彩内容