IFE-JS-task總結(1)—表單驗證和表格渲染的實現

任務描述

1.用戶輸入城市名稱和空氣質量指數后,點擊“確認添加”按鈕后,就會將用戶的輸入在進行驗證后,添加到下面的表格中,新增一行進行顯示

2.用戶輸入的城市名必須為中英文字符,空氣質量指數必須為整數

3.用戶輸入的城市名字和空氣質量指數需要進行前后去空格及空字符處理(trim)

4.用戶輸入不合規格時,需要給出提示(允許用alert,也可以自行定義提示方式)

5.用戶可以點擊表格列中的“刪除”按鈕,刪掉那一行的數據


實現界面

雖然滿足了這次任務的需求,但是看了前輩們高分作品的源碼后,發現他們的代碼卻非常的簡潔。大約只用了我的一半,而且一些實現方式也是我沒見過的,著實讓我get到很多點。所以這次重新改了下代碼,并總結下其中的知識點和一些自己犯過的錯誤。

一.表單驗證

1.正則表達式

表單驗證

2.作用域問題

錯誤點

開始在click事件處理函數中調用trim函數,卻沒能實現去空格的效果,究其原因是作用域的問題。

需要注意的是:

1.在某個執行環境中所有代碼執行完畢后,該環境被銷毀,保存在其中的所有變量(局部變量)和函數定義也隨之銷毀,而全局變量則是直到應用程序退出(例如網頁或瀏覽器關閉)時才會被銷毀。

2.作用域鏈:內部環境可以通過作用域鏈訪問所有的外部環境,但外部環境不能訪問內部環境中的任何變量和函數。

這里的錯誤即,click時間處理函數本身就是個局部環境,其中定義的變量均是局部變量(很長一段時間內我都忽略了這點)。故在trim函數中的str num其實是另外重新定義的變量,無法接收來自click函數里的的str和num。

改正后

改正的方法即把trim函數放在click事件處理函數里面,因為作用域鏈機制,可以訪問到函數外面環境中的str和num。

3.拓展-如何實現非模態的錯誤反饋

用alert實現的模態反饋

用alert方式實現的錯誤反饋是模態的,即要求用戶離開原來的操作流,這樣的體驗必然是不佳的。

非模態反饋


keyup事件

利用keyup事件,在用戶輸入的過程中就提醒用戶輸入錯誤,并且置灰確認按鈕。

二.表格渲染


1.插入表格項的簡單方式

動態插入表格數據

原來我的實現方式是用節點生成(createElement),節點插入(appendChild)等DOM操作來實現,但是代碼卻非常繁瑣。以字符串形式把標簽和內容一起插入到父級table的innerHTML,這種實現方式非常簡潔。

2.事件委托

點擊span 刪除當前行

什么是事件委托?

對“事件處理程序過多”問題的解決方案就是事件委托。事件委托利用了事件冒泡,只指定一個事件處理程序,就可以管理某一類型的所有事件。

為什么要用事件委托?

因為在JS中,添加到頁面上的事件處理程序數量將直接關系到頁面的整體性能。

如何運用事件委托?

暫時理解的是 給父級(或更高的層次)添加事件處理函數+用標簽名判斷哪個子級會執行。

注意點:標簽名在JS中是以大寫形式獲取到的,所以在判斷時要用toLowerCase()轉化成小寫。

3.其它未能運用的知識點-dataset

關于javascript中dataset的問題小結

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,546評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,570評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,505評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,017評論 1 313
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,786評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,219評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,287評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,438評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,971評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,796評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,995評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,540評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,230評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,918評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,697評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內容

  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,719評論 18 399
  • 1.幾種基本數據類型?復雜數據類型?值類型和引用數據類型?堆棧數據結構? 基本數據類型:Undefined、Nul...
    極樂君閱讀 5,555評論 0 106
  • 看畫,體會畫家,感受美,如非得美館,非得紐約柏林盧浮宮,看原作,不太是那意思了,聽曲,體會意思,品味情緒,理解情感...
    晚霞消失之時閱讀 275評論 0 0
  • 凌晨2:50分,我從睡夢中醒來,驚醒了先生。先生說剛剛做了一個夢,感覺不太好,不知當說不當說。“說說嘛,不好的夢說...
    伊石榴閱讀 345評論 0 1
  • 500天晚安筆記三人行即將結束,想當初我們三的結合也是個偶然,其中一個是前同事,另一個是剛在群里認識的姐妹。由于晚...
    景景相依閱讀 263評論 0 0