1.背景介紹
1.1原生js表單驗證的劣勢
我們在獲取用戶輸入值的時候，有一個必要的環(huán)節(jié)就是進(jìn)行表單驗證拓劝，javascript有一些好用的表單驗證功能雏逾，但是也存在一些問題，比如進(jìn)行簡單的事件監(jiān)聽往往需要寫大量的獲取數(shù)據(jù)以及數(shù)據(jù)呈現(xiàn)的代碼
1.2angular js在表單驗證中的優(yōu)勢
angular在數(shù)據(jù)獲取郑临、動態(tài)綁定栖博、頁面呈現(xiàn)等方面有很大的優(yōu)勢，可以將大量繁多的代碼進(jìn)行簡化牧抵，在表單驗證方面笛匙，angular也有其特殊的優(yōu)勢
2.知識剖析
2.1ng-blur
ng-blur 指令用于告訴 AngularJS HTML 元素在失去焦點時需要執(zhí)行的表達(dá)式；
AngularJS 中的 ng-blur 指令不會覆蓋原生的 onblur 事件犀变， 如果觸發(fā)該事件妹孙，ng-blur 表達(dá)式與原生的 onblur 事件都會執(zhí)行。
2.2ng-focus
ng-focus 指令用于告訴 AngularJS 在 HTML 元素獲取焦點時需要執(zhí)行的操作ng-focus 指令不會覆蓋元素的原始 onfocus 事件, 事件觸發(fā)時获枝，ng-focus表達(dá)式與原始的 onfocus 事件將都會執(zhí)行蠢正。
2.3ng-change
ng-change 指令用于告訴 AngularJS 在 HTML 元素值改變時需要執(zhí)行的操作，ng-change 指令需要搭配 ng-model 指令使用省店。ng-change 事件在值的每次改變時觸發(fā)嚣崭，它不需要等待一個完成的修改過程，或等待失去焦點的動作懦傍，ng-change 事件只針對輸入框值的真實修改雹舀，而不是通過 JavaScript 來修改。
2.4ng-disable
ng-disabled 指令設(shè)置表單輸入字段的 disabled 屬性(input, select, 或 textarea)粗俱。如果 ng-disabled 中的表達(dá)式返回 true 則表單字段將被禁用说榆。
3.常見問題
一般網(wǎng)上只給出每個方法的單獨的使用方法，比較簡單寸认，但在實際的表單驗證的過程中签财，需要將不同的方法結(jié)合起來，通過變量值來判斷如何將表單驗證結(jié)果呈現(xiàn)出來偏塞，而controller中一般設(shè)置好判斷函數(shù)唱蒸，跟具體的情況來改變量的值。
4.解決方案
ng-blur/ng-change/ng-focus的用法是類似的灸叼，都是當(dāng)某個事件觸發(fā)時神汹，可以進(jìn)行變量值變化或啟用函數(shù)庆捺；
ng-disabled和ng-hide用法是類似的，都是可以改變頁面呈現(xiàn)的效果慎冤，而效果則取決于某個變量值疼燥；
這兩類方法需要通過變量配合起來使用，變量通過controller來進(jìn)行控制蚁堤；
5.編碼實戰(zhàn)
我們給input輸入框設(shè)置ng-blur、ng-change功能但狭，當(dāng)input失焦時披诗，ng-blur會觸發(fā)，然后啟動inputCheck（）函數(shù)立磁；同樣的呈队，當(dāng)輸入框內(nèi)容改變時，會觸發(fā)ng-minCheck（）函數(shù)唱歧。最底下兩個div是提示框宪摧，設(shè)置了ng-hide指令，提示框的隱藏或顯示會根據(jù)變量var1和var2的布爾值來判斷颅崩。
目前實現(xiàn)了基本的功能，即ng-blur事件和ng-change事件都可以正常觸發(fā)尖滚，函數(shù)也可以
正常對輸入框的值進(jìn)行判斷喉刘，但是現(xiàn)在依然存在一些問題：
1.ng-blur事件是在失焦之后觸發(fā)，但是事件發(fā)生以后卻無法改變漆弄，它自己不能再根據(jù)值的變化變回去了睦裳，
這會導(dǎo)致輸入框在開始輸入值的時候，ng-blur觸發(fā)的事件依然存在
2.ng-change觸發(fā)以后撼唾，如果用戶最終沒有任何值輸入廉邑，那么ng-blur事件觸發(fā)的時候，
ng-change事件留下來的提示框就不該顯示了券坞，但由于同樣的原因鬓催，依舊會顯示出來，
如下圖所示：
因此我們需要對代碼再進(jìn)行一波調(diào)試：
在位數(shù)檢測函數(shù)中，添加了一個if語句判斷猴伶，就是加入用戶已經(jīng)開始輸入了课舍，那么必填項
輸入框就應(yīng)該消失塌西；
調(diào)試完之后，我們的這個簡單的表單驗證功能就實現(xiàn)了
6.擴展思考
angular還有那些好用的表單驗證功能筝尾？
7.參考文獻(xiàn)
菜鳥教程
8.更多思考
ng-message有什么優(yōu)勢
PPT鏈接：https://ptteng.github.io/PPT/PPT/js-08-ng-blur%20.html#/
視頻鏈接：https://v.qq.com/x/page/b0512gnftq5.html
技能樹.IT修真院
“我們相信人人都可以成為一個工程師捡需，現(xiàn)在開始，找個師兄筹淫，帶你入門站辉，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷盟鸾”饰剥。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線摧阅，學(xué)習(xí)透明化汰蓉，成長可見化，師兄1對1免費指導(dǎo)棒卷」四酰快來與我一起學(xué)習(xí)吧?！
