【成都小課堂】angular js常用指令 ng-blur、ng-change帆阳、ng-focus哺壶、ng-disabled是如何運用到表單驗證中的?

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

菜鳥教程

H5自帶表單驗證

jQuery-Validate驗證插件

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í)吧?!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末冒版,一起剝皮案震驚了整個濱河市液茎,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌辞嗡,老刑警劉巖豁护,帶你破解...
    沈念sama閱讀 211,376評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異欲间,居然都是意外死亡楚里,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評論 2 385
  • 文/潘曉璐 我一進(jìn)店門猎贴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來班缎,“玉大人,你說我怎么就攤上這事她渴〈镏罚” “怎么了?”我有些...
    開封第一講書人閱讀 156,966評論 0 347
  • 文/不壞的土叔 我叫張陵趁耗,是天一觀的道長沉唠。 經(jīng)常有香客問我,道長苛败,這世上最難降的妖魔是什么满葛? 我笑而不...
    開封第一講書人閱讀 56,432評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮罢屈,結(jié)果婚禮上蔓倍,老公的妹妹穿的比我還像新娘挫鸽。我一直安慰自己昌抠,他們只是感情好苍姜,可當(dāng)我...
    茶點故事閱讀 65,519評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著曼月,像睡著了一般谊却。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上哑芹,一...
    開封第一講書人閱讀 49,792評論 1 290
  • 那天炎辨,我揣著相機(jī)與錄音,去河邊找鬼绩衷。 笑死蹦魔,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的咳燕。 我是一名探鬼主播勿决,決...
    沈念sama閱讀 38,933評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼招盲!你這毒婦竟也來了低缩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,701評論 0 266
  • 序言:老撾萬榮一對情侶失蹤曹货,失蹤者是張志新(化名)和其女友劉穎咆繁,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體顶籽,經(jīng)...
    沈念sama閱讀 44,143評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡玩般,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,488評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了礼饱。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片坏为。...
    茶點故事閱讀 38,626評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖镊绪,靈堂內(nèi)的尸體忽然破棺而出匀伏,到底是詐尸還是另有隱情,我是刑警寧澤蝴韭,帶...
    沈念sama閱讀 34,292評論 4 329
  • 正文 年R本政府宣布够颠,位于F島的核電站,受9級特大地震影響榄鉴,放射性物質(zhì)發(fā)生泄漏履磨。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,896評論 3 313
  • 文/蒙蒙 一庆尘、第九天 我趴在偏房一處隱蔽的房頂上張望蹬耘。 院中可真熱鬧,春花似錦减余、人聲如沸综苔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽如筛。三九已至,卻和暖如春抒抬,著一層夾襖步出監(jiān)牢的瞬間杨刨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工擦剑, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留妖胀,地道東北人芥颈。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像赚抡,于是被迫代替她去往敵國和親爬坑。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,494評論 2 348

推薦閱讀更多精彩內(nèi)容