大家好蜒谤,我是IT修真院成都分院的學(xué)員山宾,一枚正直純潔善良的WEB前端程序員。
今天給大家分享一下鳍徽,修真院官網(wǎng)JS任務(wù)8资锰,angular js常用指令 ng-blur、ng-change阶祭、ng-focus绷杜、ng-disabled是如何運用到表單驗證中的?
1.背景介紹
什么事表單驗證
表單驗證是javascript中的高級選項之一濒募。JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對 HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗證鞭盟。
2.知識剖析
常見的表單驗證有哪些
比如登陸頁面的賬號和密碼,我們可以限制賬號和密碼的長度瑰剃,可以限制他不可以為空
比如我們在某些平臺實名認(rèn)證的時候齿诉,姓名,身份證號培他,手機(jī)號必填
3.常見問題
如何實現(xiàn)表單驗證呢鹃两?
4.解決方案
h5自帶表單驗證
jQuery的表單驗證
angular表單驗證
angular表單驗證中的ng-blur遗座、ng-change舀凛、ng-focus、ng-disabled是如何運用到表單驗證中的
ng-blur 指令用于告訴 AngularJS HTML 元素在失去焦點時需要執(zhí)行的表達(dá)式途蒋。
AngularJS 中的 ng-blur 指令不會覆蓋原生的 onblur 事件猛遍, 如果觸發(fā)該事件,ng-blur 表達(dá)式與原生
的 onblur 事件都會執(zhí)行。
ng-focus 指令用于告訴 AngularJS 在 HTML 元素獲取焦點時需要執(zhí)行的操作懊烤。
ng-focus 指令不會覆蓋元素的原始 onfocus 事件, 事件觸發(fā)時梯醒,ng-focus 表達(dá)式與原始的 onfocus?
事件將都會執(zhí)行。
ng-change 指令用于告訴 AngularJS 在 HTML 元素值改變時需要執(zhí)行的操作腌紧。
ng-change 指令需要搭配 ng-model 指令使用茸习。
AngularJS ng-change 指令指令不會覆蓋原生的 onchange 事件, 如果觸發(fā)該事件,ng-change 表達(dá)
式與原生的 onchange 事件都會執(zhí)行壁肋。
ng-change 事件在值的每次改變時觸發(fā)号胚,它不需要等待一個完成的修改過程,或等待失去焦點的作
ng-change 事件只針對輸入框值的真實修改浸遗,而不是通過 JavaScript 來修改猫胁。
5.參考文獻(xiàn)
6..更多討論
ng-pattern表單驗證的方式
答:ngularJS ng-change 指令指令不會覆蓋原生的 onchange 事件, 如果觸發(fā)該事件,ng-change 表達(dá)式與原生的 onchange 事件都會執(zhí)行跛锌。
答:
ng-class-even?指令用于為 HTML 元素動態(tài)的綁定一個或多個 CSS 類弃秆,但只作用于偶數(shù)行。
ng-class-even?指令需要與?ng-repeat?指令搭配使用髓帽。
ng-class-even?指令建議用在表格的樣式渲染中菠赚,但是所有HTML元素都是支持的。
ng-class-odd?指令用于為 HTML 元素動態(tài)的綁定一個或多個 CSS 類郑藏,但只作用于奇數(shù)行锈至。
ng-class-odd?指令需要與?ng-repeat?指令搭配使用。
ng-class-odd?指令建議用在表格的樣式渲染中译秦,但是所有HTML元素都是支持的峡捡。
答:ngMessages、ng-pattern
答:
原生novalidate 屬性規(guī)定當(dāng)提交表單時不對其進(jìn)行驗證筑悴。
如果使用該屬性们拙,則表單不會驗證表單的輸入。
novalidate 屬性適用于:<form>阁吝,以及以下類型的標(biāo)簽:text, search, url, telephone, email, password, date pickers, range 以及 color砚婆。
鳴謝
感謝大家觀看
----
技能樹.IT修真院
“我們相信人人都可以成為一個工程師,現(xiàn)在開始突勇,找個師兄装盯,帶你入門,掌控自己學(xué)習(xí)的節(jié)奏甲馋,學(xué)習(xí)的路上不再迷霉∧危”。
這里是技能樹.IT修真院定躏,成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線账磺,學(xué)習(xí)透明化芹敌,成長可見化,師兄1對1免費指導(dǎo)垮抗∈侠蹋快來與我一起學(xué)習(xí)吧?!