js期中大作業第二題——表單驗證中的即時錯誤提醒

2020-12-09 潔哥愛程序

題目是：完成表單驗證中的即時錯誤提醒。要求用戶名可包含字母、數字和下劃線；密碼至少有6位；再次輸入密碼和上一次需要一致；出生日期是四位年份且以20開頭，日期需在0-31之間。每個文本框都必須填寫，不能空。

先來看看最後的效果吧

這是最初的效果

這是即使錯誤提醒

這是點擊提交按鈕時會出現的彈窗提醒

這是填寫正確的表單

點擊提交就登錄成功啦

那下面就是代碼和講解了

其實就是寫了一個個函數呢

寫表單控制項的時候記得寫好id和name屬性哦

下面是頁面代碼

這是剩下的頁面代碼

代碼和注釋看完了，那你看會了嗎，看會不是真的會，大家記得動手實踐一下哦，歡迎留言評論，我們一起學習一起進步！

後續代碼正在整理中，大家點個讚盡請期待吧

相關焦點

  • 你的表單害你沒訂單?9個常見的表單設計問題
    在網站中，表單是使用者跟我們溝通的主要橋梁。透過表單，使用者可以買東西、訂閱新文章、更新資料……可以說網站最重要的功能，都是靠表單來完成。然而這個跟顧客打交道的重要環節，我們真的有做好了嗎？以下分享的是一些常見的表單設計問題，以及我們可以怎麼修正。表單設計好，可以差多少？
  • 使用Html+JavaScript實現表單上用戶名和密碼的非空驗證案例
    ，因此，表單驗證是JavaScript的鼻祖功能。我們可以將在C#後端開發中使用的一些表單驗證技巧用在JavaScript表單驗證中。語言不同，但原理都是一樣的。目標：練習JavaScript給文本框賦值和取值，並進行非空判斷。
  • 表單設計總結:構建有趣的界面「對話」
    減少用戶操作繁瑣的表單一直被人們所詬病，減少用戶的操作可以提高用戶的輸入效率，從而提高用戶的轉化率。比如表單中需要用戶提供地址信息，點擊「我的位置」可以自動獲取地理信息，避免了用戶填寫長長的地址的煩惱，在移動場景下大大節省了用戶的操作時間。
  • 二年級語文期中測試密卷、易錯題分析,預祝孩子們再創佳績(上)
    接下來會進行課後複習，將不懂的地方標出，由家長講解直到聽懂為止，當然有家長文化有限，如此就要叮囑孩子第二天記得問老師，將知識全部弄懂，成績好就是必然的結果。最後將老師第二天要上的課程預習一遍，文章至少讀三遍，古詩詞讀五遍為宜，並圈出文章後田字格中的生字，包括標出文章的段落。
  • js破解之Incapsula cdn
    如下就是Incapsula cdn的js代碼把js整體粘都chrome控制臺執行一波本以為會著重驗證這個cookie，誰知道這個xhr請求才是關鍵點。現在開始分析js，了解過我上面提到過的兩個工具的朋友，應該都知道怎麼下這個set cookie斷點（xhr斷點就不說了）,這裡就不贅述了，精簡效率為主。這裡以油猴腳本為例（確實更簡單粗暴一點哈）
  • WEB開發中常見漏洞防禦方法
    js進行掛馬、黑帽seo、攻擊客戶計算機等操作危害十分嚴重。js或者html代碼，這裡就可能導致，用戶輸入的代碼在瀏覽器中被解析並執行，那麼我們這就可以通過 htmlspecialchars()將其轉義為不可解析的字符串，從而避免此類攻擊。
  • 2020一年級語文期中考試衝刺卷,該卷難易適中,助力孩子夯實基礎
    期中考試剛過，不知道家長們對孩子們的成績是否滿意呢？在這裡筆者提醒各位家長，千萬不要因為孩子的一次考試成績而產生情緒上的波動，特別是對於一年級的新生來說，期中考試固然能反映出孩子的學習狀況，但一次考試真代表不了孩子真實的成績。
  • 四個要點教你如何用表單收集高質量數據
    日常工作中，我們經常會使用表單大師收集各類數據信息，例如：活動報名，意見反饋、會員信息等，這些數據種類繁多且複雜，如何將這些數據價值發揮到最大呢？表姐首要建議是提高收集數據的質量。確保數據唯一在使用表單收集數據的過程中，有些數據是需要確保唯一性的，例如一張活動報名表的中的報名人數，經常會出現重複報名的情況，導致整理起來非常複雜低效。建議：為了避免重複提交數據，你可以使用表單大師屬性設置中勾選 「不許重複」功能，以確保每條收集到的數據都是獨一無二的。
  • 期中考試來臨,班主任提醒:「平時都會,考試不對」真正的原因不是...
    我們必須通過「粗心」看到背後反映出的問題： 01 粗心，因為孩子對知識掌握的熟練度不夠 所謂熟練度，可以想像一下我們成年人，做小學一年級的計算題，每一題其實對我們來說都很簡單。
  • 人教版小學一年級上冊,數學期中考試試卷,試題分析與講解
    親愛的小朋友們好，馬上要期中考試了，對於剛進入一年級的小朋友來說，這是第一次相對重要的考試，一定想考個好的成績吧！ 那麼，一年級上冊的數學期中考試題，一般會考哪些內容？有哪些題型？要怎麼解答？需要注意些什麼呢？讓我們一起來看一套人教版小學一年級數學上冊的期中考試試卷吧。
  • 二年級數學期中考試,小小失誤斷送滿分,老師:改善一點期末滿分
    二年級數學期中考試，小小失誤斷送滿分，老師：改善一點期末滿分。這是一場姍姍來遲的期中考試，學生考了97分，丟掉的3分其實是一道很簡單的加法計算題。學生答錯這道題是非常可惜的，因為它實在是太簡單了。為什麼會錯呢？
  • 小學數學一年級上冊期中測試卷
    一年級的學生入學已經有2個月了，基本適應了一年級的生活，學期也過半，馬上期中考試了，你複習得怎麼樣了？這是一套一年級上學期期中考試數學試題，難度比較低，可以試著做一做。第一題第二題填一填。有5個小題組成。
  • 「開往春天的 Node.js」 - Node 地下鐵第二期線下沙龍總結
    過去的一年，淘寶使用 Node.js 源站解決了已有的問題，我們用幾十臺虛擬機支撐了淘寶數十億 PV 的流量。但 Node.js 源站也為我們帶來了新的挑戰：你可以在基德同學的分享中深入了解這其中的奧妙，另外，也歡迎喜歡挑戰的人加入我們，讓 Node.js 源站更加強大。
  • video.js 7.0 文件結構分析
    1.control-bar 核心的UI類的集合了，播放器下方的控制器都在此目錄中。 11. close-button.js 對關閉按鈕的封裝，功能比較單一 12. component.js video.js框架中最重要的類，是所有類的基類，也是實現組件化的基石 13. error-display.js
  • 設計沉思錄|移動端複雜表單的減負與提效
    編輯導讀：我們上網經常會碰到各種各樣的表單。註冊帳號要填表單，網上購物要填表單，登錄郵箱要填表單……好的表單設計能給網站增加註冊量，面對複雜的表單，設計師如何對其重新設計，為用戶減輕負擔、提高表單效率和成功率呢？本文作者結合負責的具體項目案例，對此進行了分析總結，與大家分享。
  • 一年級第二學期語文期中測試卷+答案,收藏練習!
    馬上就進入第二學期的期中測試階段了，不知不覺學生們又度過了半個學期了，前四個單元的知識掌握的怎麼樣，通過期中測試便一目了然了。接下來，我們通過一張期中測試的卷子來具體分析，需要掌握的具體知識內容，希望同學們可以多加複習、練習，爭取取得一個好的成績。一、讀拼音寫詞語。生字生詞是一定要同學們掌握的，答案：故鄉、再見、因為、快樂、低頭、雪花、高興、以後；二、音序查字法查字典。
  • 期中考試之後,如何做,才能讓成績「飛起來」?聽聽老師怎麼說
    那麼，期中考試後，如何分析，才能讓成績「飛起來」？高三老師給大家提供一些參考。第一，正視問題，是解決問題的前提只有正確對待考試，才能正視問題，但是現實中，很多學生和家長對於考試，沒有一個正確的認識，導致很多問題被掩蓋了。
  • 2020年二年級語文期中試卷,孩子考了91,家長樂開花,老師:墊底
    這次期中測試小袁同學竟然考了91分，家長可高興了，在朋友圈曬女兒的試卷和分數，語文老師看到後回覆：本次期中考試班平均93分，你女兒墊底了，但是孩子的學習成績大有進步，希望繼續加油哦！接下來於老師將這份試卷上傳給大家，還沒有進行期中考試的同學，可以作為複習資料參考一下：2020年二年級語文期中試卷，孩子考了91，家長樂開花，老師：墊底第一頁第四小題：給加點的多音字選擇正確的讀音，畫上「——」，並用另一個讀音組詞。