angularjs 常用指令

大家好,我是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)

demo

6.擴(kuò)展思考

還有哪些表單驗(yàn)證的方式?

7. 參考文獻(xiàn)

菜鳥

8. 更多討論

今天的分享就到這里啦,歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言、拍磚~

感謝大家觀看

PPT

視頻

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容