大家好,我是IT修真院順義分院學(xué)員,一枚正直善良的web程序員。
今天給大家分享一下,修真院官網(wǎng)angularjs 常用表單驗(yàn)證指令!
1. 背景介紹
什么是表單驗(yàn)證?
表單驗(yàn)證是javascript中的高級選項(xiàng)之一。JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對 HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。
-
2. 知識剖析
常見的表單驗(yàn)證有哪些?
比如登陸頁面的賬號和密碼,我們可以限制賬號和密碼的長度,可以限制他不可以為空
比如我們在某些平臺實(shí)名認(rèn)證的時(shí)候,姓名,身份證號,手機(jī)號必填
3. 常見問題
如何實(shí)現(xiàn)表單驗(yàn)證呢??
4. 解決方案
h5自帶表單驗(yàn)證
jQuery的表單驗(yàn)證
angular表單驗(yàn)證
angular表單驗(yàn)證中的ng-blur、ng-change、ng-focus、ng-disabled是如何運(yùn)用到表單驗(yàn)證中的
1、ng-blur 指令用于告訴 AngularJS HTML 元素在失去焦點(diǎn)時(shí)需要執(zhí)行的表達(dá)式。
AngularJS 中的 ng-blur 指令不會覆蓋原生的 onblur 事件, 如果觸發(fā)該事件,ng-blur 表達(dá)式與原生的 onblur 事件都會執(zhí)行。
2、ng-focus 指令用于告訴 AngularJS 在 HTML 元素獲取焦點(diǎn)時(shí)需要執(zhí)行的操作。
ng-focus 指令不會覆蓋元素的原始 onfocus 事件, 事件觸發(fā)時(shí),ng-focus 表達(dá)式與原始的 onfocus 事件將都會執(zhí)行。
3、ng-change 指令用于告訴 AngularJS 在 HTML 元素值改變時(shí)需要執(zhí)行的操作。
ng-change 指令需要搭配 ng-model 指令使用。
AngularJS ng-change 指令不會覆蓋原生的 onchange 事件, 如果觸發(fā)該事件,ng-change 表達(dá)式與原生的 onchange 事件都會執(zhí)行。
ng-change 事件在值的每次改變時(shí)觸發(fā),它不需要等待一個(gè)完成的修改過程,或等待失去焦點(diǎn)的動作
ng-change 事件只針對輸入框值的真實(shí)修改,而不是通過 JavaScript 來修改。
4、ng-disabled 指令設(shè)置表單輸入字段的 disabled 屬性(input, select, 或 textarea)。
如果 ng-disabled 中的表達(dá)式返回 true 則表單字段將被禁用。
5. 編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
還有哪些表單驗(yàn)證的方式?
7. 參考文獻(xiàn)
8. 更多討論
今天的分享就到這里啦,歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言、拍磚~
感謝大家觀看