JavaScript - 表單驗證：初學者指南
你好，有抱負的程式設計師們！今天，我們將要深入探索JavaScript表單驗證的精彩世界。作為一個教導程式設計多年的老師，我可以告訴你，這是你要學習的最實用和最重要的技能之一。那麼，讓我們開始吧！
表單驗證是什麼？
在我們跳進代碼之前，讓我們先了解表單驗證是什麼，以及它為什麼重要。想像一下你在線上訂購披薩時填寫表單。你可能不會想意外訂購了1000個披薩而不是1個，對吧？這就是表單驗證的作用所在——它檢查用戶輸入的數據，以確保其正確並且格式正確。
基本表單驗證
1. 檢查字段是否為空
讓我們從最基本的驗證開始——檢查字段是否為空。這裡有一個簡單的例子：
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}在這段代碼中：
- 我們從名為 "myForm" 的表單中獲取名為 "fname" 的字段的值。
- 如果該值為空（空字符串），我們會顯示一個警告並返回 false，這樣可以防止表單被提交。
2. 驗證數字輸入
現在，讓我們確保一個字段只包含數字：
function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("Input not valid");
return false;
}
}這裡發生了什麼：
- 我們獲取 ID 為 "myNumber" 的輸入字段的值。
- 我們使用
isNaN()函數來檢查它是否不是數字。 - 我們還檢查數字是否在 1 到 100 之間。
- 如果這些條件中的任何一個為真，我們會顯示一個警告並返回 false。
數據格式驗證
1. 電子郵件驗證
最常見的驗證之一是檢查電子郵件地址是否具有正確的格式。這是我們如何做到這一點的方法：
function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Please enter a valid email address");
return false;
}
}這可能看起來有點嚇人，但讓我們分解一下：
- 我們使用正則表達式（regex）來檢查電子郵件格式。
- 正則表達式檢查以下內容：
- 一些不是空格或 @ 的字符 (
[^\s@]+) - 然後是一個 @ 符號
- 然後是更多不是空格或 @ 的字符
- 然後是一個點
- 然後是最後更多不是空格或 @ 的字符
2. 日期驗證
讓我們驗證一個日期，以確保其格式為 MM/DD/YYYY：
function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("Please enter a valid date in MM/DD/YYYY format");
return false;
}
}這個正則表達式更複雜，但它檢查以下內容：
- 它檢查：
- 一個月（01-12）
- 然後是一個 /
- 一個日（01-31）
- 另一個 /
- 一個四位數的年
請記住，這檢查的是格式，但它不會檢查日期是否實際有效（例如2月30日）。
組合所有內容
現在我們已經看到了個別的驗證，讓我們將它們組合成一個單一的表單：
<form name="myForm" onsubmit="return validateForm()">
Name: <input type="text" name="fname"><br>
Age: <input type="text" id="myNumber"><br>
Email: <input type="text" id="myEmail"><br>
Date: <input type="text" id="myDate"><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
if (!validateName() || !validateNumber() || !validateEmail() || !validateDate()) {
return false;
}
return true;
}
function validateName() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
return true;
}
function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("Age must be a number between 1 and 100");
return false;
}
return true;
}
function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Please enter a valid email address");
return false;
}
return true;
}
function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("Please enter a valid date in MM/DD/YYYY format");
return false;
}
return true;
}
</script>在這個完整的例子中：
- 我們有一個包含名稱、年齡、電子郵件和日期字段的表單。
- 表單的
onsubmit事件調用validateForm()。 -
validateForm()調用我們所有的個別驗證函數。 - 如果任何驗證失敗，表單提交將被阻止。
結論
恭喜你！你剛剛學會了JavaScript表單驗證的基本知識。記住，驗證不僅僅是防止錯誤——它是創造更好用戶體驗的關鍵。隨著你繼續你的程式設計旅程，你會找到更多提升你的表單和使其更加用戶友好的方法。
這裡是一個總結我們所涵蓋的驗證方法的表格：
| 方法 | 目的 | 示例 |
|---|---|---|
| 空字段檢查 | 確保必填字段已填寫 | if (x == "") |
| 數字驗證 | 檢查輸入是否為數字並在範圍內 | if (isNaN(x) || x < 1 || x > 100) |
| 電子郵件驗證 | 驗證電子郵件格式 | if (!regex.test(email)) |
| 日期格式驗證 | 檢查日期是否為正確格式 | if (!regex.test(date)) |
繼續練習，不久你將成為表單驗證的專家！記住，每個偉大的程式設計師都是從你現在的位置開始的。快樂編程！
Credits: Image by storyset