iT邦幫忙

2024 iThome 鐵人賽

DAY 19
0
自我挑戰組

JavaScript DOM 操作系列 第 19

DAY 19: 表單驗證

  • 分享至 

  • xImage
  •  

今天學習了如何使用 JavaScript 進行表單驗證,發現這是一個非常實用的技術。驗證可以確保使用者輸入正確的資料,特別是在處理註冊或聯絡表單時。這次的範例是檢查使用者是否輸入了值,並且這個值是否符合特定格式,像是電子郵件格式的驗證。

  1. 檢查欄位是否為空 這段程式碼將會檢查表單中的輸入框是否留空:

https://ithelp.ithome.com.tw/upload/images/20241003/20169384tRdaLRAZ4M.png

結果:

如果欄位是空的,會彈出一個提示框,提醒使用者「請勿留空!」。

  1. 檢查是否為有效的電子郵件格式 使用正則表達式來驗證電子郵件格式是否正確:

https://ithelp.ithome.com.tw/upload/images/20241003/20169384dSHjbaKGyU.png

結果:

當使用者輸入不符合電子郵件格式的字串時,會跳出警告「請輸入有效的電子郵件!」。

  1. 補充:更進階的多欄位驗證 這裡再加入一個驗證密碼欄位長度的範例:

https://ithelp.ithome.com.tw/upload/images/20241003/201693846qfmQdkgaO.png

這個範例能確保使用者的密碼長度符合最低要求,以提高安全性。


上一篇
DAY 18: 操作表格元素
下一篇
DAY 20: 建立簡單的計數器應用
系列文
JavaScript DOM 操作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言