1.背景介紹
1.1原生js表單驗(yàn)證的劣勢(shì)
我們?cè)讷@取用戶輸入值的時(shí)候，有一個(gè)必要的環(huán)節(jié)就是進(jìn)行表單驗(yàn)證，javascript有一些好用的表單驗(yàn)證功能，但是也存在一些問(wèn)題，比如進(jìn)行簡(jiǎn)單的事件監(jiān)聽(tīng)往往需要寫大量的獲取數(shù)據(jù)以及數(shù)據(jù)呈現(xiàn)的代碼
1.2angular js在表單驗(yàn)證中的優(yōu)勢(shì)
angular在數(shù)據(jù)獲取、動(dòng)態(tài)綁定、頁(yè)面呈現(xiàn)等方面有很大的優(yōu)勢(shì)，可以將大量繁多的代碼進(jìn)行簡(jiǎn)化，在表單驗(yàn)證方面，angular也有其特殊的優(yōu)勢(shì)
2.知識(shí)剖析
2.1ng-blur
ng-blur 指令用于告訴 AngularJS HTML 元素在失去焦點(diǎn)時(shí)需要執(zhí)行的表達(dá)式；
AngularJS 中的 ng-blur 指令不會(huì)覆蓋原生的 onblur 事件， 如果觸發(fā)該事件，ng-blur 表達(dá)式與原生的 onblur 事件都會(huì)執(zhí)行。
2.2ng-focus
ng-focus 指令用于告訴 AngularJS 在 HTML 元素獲取焦點(diǎn)時(shí)需要執(zhí)行的操作ng-focus 指令不會(huì)覆蓋元素的原始 onfocus 事件, 事件觸發(fā)時(shí)，ng-focus表達(dá)式與原始的 onfocus 事件將都會(huì)執(zhí)行。
2.3ng-change
ng-change 指令用于告訴 AngularJS 在 HTML 元素值改變時(shí)需要執(zhí)行的操作，ng-change 指令需要搭配 ng-model 指令使用。ng-change 事件在值的每次改變時(shí)觸發(fā)，它不需要等待一個(gè)完成的修改過(guò)程，或等待失去焦點(diǎn)的動(dòng)作，ng-change 事件只針對(duì)輸入框值的真實(shí)修改，而不是通過(guò) JavaScript 來(lái)修改。
2.4ng-disable
ng-disabled 指令設(shè)置表單輸入字段的 disabled 屬性(input, select, 或 textarea)。如果 ng-disabled 中的表達(dá)式返回 true 則表單字段將被禁用。
3.常見(jiàn)問(wèn)題
一般網(wǎng)上只給出每個(gè)方法的單獨(dú)的使用方法，比較簡(jiǎn)單，但在實(shí)際的表單驗(yàn)證的過(guò)程中，需要將不同的方法結(jié)合起來(lái)，通過(guò)變量值來(lái)判斷如何將表單驗(yàn)證結(jié)果呈現(xiàn)出來(lái)，而controller中一般設(shè)置好判斷函數(shù)，跟具體的情況來(lái)改變量的值。
4.解決方案
ng-blur/ng-change/ng-focus的用法是類似的，都是當(dāng)某個(gè)事件觸發(fā)時(shí)，可以進(jìn)行變量值變化或啟用函數(shù)；
ng-disabled和ng-hide用法是類似的，都是可以改變頁(yè)面呈現(xiàn)的效果，而效果則取決于某個(gè)變量值；
這兩類方法需要通過(guò)變量配合起來(lái)使用，變量通過(guò)controller來(lái)進(jìn)行控制；
5.編碼實(shí)戰(zhàn)
我們給input輸入框設(shè)置ng-blur、ng-change功能，當(dāng)input失焦時(shí)，ng-blur會(huì)觸發(fā)，然后啟動(dòng)inputCheck（）函數(shù)；同樣的，當(dāng)輸入框內(nèi)容改變時(shí)，會(huì)觸發(fā)ng-minCheck（）函數(shù)。最底下兩個(gè)div是提示框，設(shè)置了ng-hide指令，提示框的隱藏或顯示會(huì)根據(jù)變量var1和var2的布爾值來(lái)判斷。
目前實(shí)現(xiàn)了基本的功能，即ng-blur事件和ng-change事件都可以正常觸發(fā)，函數(shù)也可以
正常對(duì)輸入框的值進(jìn)行判斷，但是現(xiàn)在依然存在一些問(wèn)題：
1.ng-blur事件是在失焦之后觸發(fā)，但是事件發(fā)生以后卻無(wú)法改變，它自己不能再根據(jù)值的變化變回去了，
這會(huì)導(dǎo)致輸入框在開(kāi)始輸入值的時(shí)候，ng-blur觸發(fā)的事件依然存在
2.ng-change觸發(fā)以后，如果用戶最終沒(méi)有任何值輸入，那么ng-blur事件觸發(fā)的時(shí)候，
ng-change事件留下來(lái)的提示框就不該顯示了，但由于同樣的原因，依舊會(huì)顯示出來(lái)，
如下圖所示：
因此我們需要對(duì)代碼再進(jìn)行一波調(diào)試：
在位數(shù)檢測(cè)函數(shù)中，添加了一個(gè)if語(yǔ)句判斷，就是加入用戶已經(jīng)開(kāi)始輸入了，那么必填項(xiàng)
輸入框就應(yīng)該消失；
調(diào)試完之后，我們的這個(gè)簡(jiǎn)單的表單驗(yàn)證功能就實(shí)現(xiàn)了
6.擴(kuò)展思考
angular還有那些好用的表單驗(yàn)證功能？
7.參考文獻(xiàn)
菜鳥教程
8.更多思考
ng-message有什么優(yōu)勢(shì)
PPT鏈接：https://ptteng.github.io/PPT/PPT/js-08-ng-blur%20.html#/
視頻鏈接：https://v.qq.com/x/page/b0512gnftq5.html
技能樹(shù).IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開(kāi)始，找個(gè)師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！薄?/p>
這里是技能樹(shù).IT修真院，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長(zhǎng)可見(jiàn)化，師兄1對(duì)1免費(fèi)指導(dǎo)?？靵?lái)與我一起學(xué)習(xí)吧?！
