自學前端的小白之初次編寫form表單的經驗與錯誤總結

JackJiang 發布于2019-08-22 11:06 / 2284人閱讀

摘要：對我這個初學前端的小白來講，在每次編寫標簽的時候經常把屬性省略掉，經了解標簽屬性和屬性是必須有的。五阻止表單提交以及與互換電話這是當表單不符合要求時，阻止提交表單的代碼，但寫表單的時候難免會用到，所以要把替換成電話提交

學了這么久的前端，一直沒有具體總結自己的經驗，只有一些記錄在筆記的零星經驗，今天來這里說說我在初次編寫from表單過程中總結出的東西：

首先我個人認為最難的也是個人認為最重要一點：就是當我們的程序發生問題時該怎么解決？

當編寫一段代碼的時候，背后總有種種的元素在影響代碼的運行效果，而導致錯誤發生的最具體的原因我把它理解為問題根源，當根源找到之后往往所有的問題都會迎刃而解。那怎么才能找到根源的所在呢？第一問人，第二網上查，第三查書，最后一種笨方法就是把所有的影響到的元素全都找出來，一個一個修改代碼排除，往往我們所認為正確的其實它是錯誤的。

廢話少說，下面來看一下我所遇見的問題：

一、關于標簽獨有屬性

*{list-style：none;}

這段代碼是我為了省事，把list-style放到了通配符*里面，但這么寫不對，list-style是li標簽才有的屬性，應該針對li把list-style定位到li:

li{list-style:none;}

二、單選按鈕能被同時選中

男
女

上面代碼運行的時候，會發現這兩個單選按鈕可以同時被選中，原因是input標簽少了一個name屬性。對我這個初學前端的小白來講，在每次編寫input標簽的時候經常把name屬性省略掉，經了解input標簽name屬性和type屬性是必須有的。

男
女

所以只要在input標簽加上name屬性就不會發生單選按鈕能同時選中的尷尬。

三、設置樣式時發生沖突

我想要一個輸入框失去焦點的時候，如果里面的內容為空的話，邊框變成紅色：


 
    電話：

上面的代碼并沒有實現預期的效果，原因是我之前寫樣式的時候加了border:none;,還有我在判斷時出現了錯誤，length是用來保存字符串的長度的，不能拿來判斷value是否為空，應該這么寫才對：


 
    電話：

四、正則g的錯誤使用


 
    電話：

上面代碼是如果輸入不正確的電話號碼時input失去焦點時邊框變紅色，但程序運行時我輸入正確的電話號碼，當input失去焦點時邊框變黑色再次得到焦點然后再次失去焦點邊框變紅色，原因是我在寫正則的時候用到了全局匹配g，這里g特點是在匹配成功后會記錄匹配成功后的位置，下一次匹配是從上一次匹配成功的末尾位置開始匹配，所以在使用正則匹配時，如果只匹配一個結果時g就不應該出現。

五、阻止表單提交以及submit與div互換


    電話：

這是當表單不符合要求時，阻止提交表單的代碼，但寫表單的時候難免會用到ajax，所以要把submit替換成div：


    電話：
    
    提交

GPU云服務器云服務器 html的form表單經驗總結 js提交本form表單的數據小白python自學

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91789.html

自學前端的小白之初次編寫form表單的經驗與錯誤總結

摘要：對我這個初學前端的小白來講，在每次編寫標簽的時候經常把屬性省略掉，經了解標簽屬性和屬性是必須有的。五阻止表單提交以及與互換電話這是當表單不符合要求時，阻止提交表單的代碼，但寫表單的時候難免會用到，所以要把替換成電話提交學了這么久的前端，一直沒有具體總結自己的經驗，只有一些記錄在筆記的零星經驗，今天來這里說說我在初次編寫from表單過程中總結出的東西：首先我個人認為最難的也是個人認為...

AaronYuan 2019-08-01 17:36 評論0 收藏0
自學前端的小白之初次編寫form表單的經驗與錯誤總結

摘要：對我這個初學前端的小白來講，在每次編寫標簽的時候經常把屬性省略掉，經了解標簽屬性和屬性是必須有的。五阻止表單提交以及與互換電話這是當表單不符合要求時，阻止提交表單的代碼，但寫表單的時候難免會用到，所以要把替換成電話提交學了這么久的前端，一直沒有具體總結自己的經驗，只有一些記錄在筆記的零星經驗，今天來這里說說我在初次編寫from表單過程中總結出的東西：首先我個人認為最難的也是個人認為...

cgh1999520 2019-08-29 13:26 評論0 收藏0
五萬字15張導圖Java自學路線，小白零基礎入門，程序員進階，收藏這篇就夠了

摘要：本文收錄于技術專家修煉文中配套資料合集路線導圖高清源文件點擊跳轉到文末點擊底部卡片回復資料領取哈嘍，大家好，我是一條最近粉絲問我有沒有自學路線，有了方向才能按圖索驥，事半功倍。 ...

suosuopuo 2021-10-14 09:43 評論0 收藏0
精彩文章大合集- 收藏集 - 掘金

摘要：發布應用市場的平臺搶紅包工具紅包精靈開源啦掘金紅包精靈，如果喜歡，點個開源不易。作者將原素材文章進行了新內容的添加和重新排列，但是因為文章高效的代碼編寫技巧總結前端掘金本文總結了代碼編寫技巧，來提升你的和代碼。收藏安卓開發中非常實用優秀的庫! 有圖有真相! - Android - 掘金本來是打算收藏工具類的,但轉念一想,已經有這么多優秀的庫了,就沒必要再去重復造輪子了,便歸納工作中比...

ermaoL 2019-08-29 13:03 評論0 收藏0