隨著 Web 網站的發展，表單已經成為了 Web 網站中不可缺少的一部分。表單可以讓用戶輸入各種信息，提交到前端或后端服務器進行處理。然而，用戶輸入信息可能會出現錯誤，比如輸入非法字符、沒有填寫必填項等等。這時候，前端需要用 JavaScript 來對表單進行驗證。本文將著重介紹常見的表單驗證例子，并用代碼進行演示。
一、必填項驗證
在表單中，有些項是必填的，比如姓名、郵箱、電話等等。這時候，需要對這些必填項進行驗證，判斷用戶是否填寫了相應的內容。下面是一個簡單的必填項驗證的例子：

function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
if (name == "" || email == "" || phone == "") {
alert("Please fill in all required fields!");
return false;
}
}

在上面的代碼中，我們首先獲取了 name、email 和 phone 這三個表單元素的值。然后，如果這三個值中有任何一個為空值，就彈出警告框，提示用戶將必填項填寫完整，并返回 false。如果填寫完整，則返回 true。
二、郵箱驗證
在表單中，郵箱是一個非常常見的輸入項。為了確保用戶輸入的郵箱格式正確，我們可以使用正則表達式來進行驗證。下面是一個郵箱驗證的例子：

function validateEmail() {
var email = document.getElementById("email").value;
var regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
if (!regex.test(email)) {
alert("Please enter a valid email address!");
return false;
}
}

在上面的代碼中，我們首先獲取了 id 為 email 的表單元素的值。然后，我們使用正則表達式來驗證這個值是否符合郵箱的格式。如果不符合，就彈出警告框，提示用戶輸入正確的郵箱格式，并返回 false。如果符合，則返回 true。
三、密碼驗證
在表單中，密碼輸入框需要用戶輸入復雜密碼。為了保證用戶輸入的密碼安全性，我們需要對密碼進行驗證。下面是一個密碼驗證的例子：

function validatePassword() {
var password = document.getElementById("password").value;
var regex = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%^&+=])(?=\S+$).{8,}$/;
if (!regex.test(password)) {
alert("Please enter a strong password!");
return false;
}
}

在上面的代碼中，我們首先獲取了 id 為 password 的表單元素的值。然后，我們使用正則表達式來驗證密碼是否符合要求。這里的正則表達式要求至少包含一個數字、一個小寫字母、一個大寫字母、一個特殊字符，長度至少為 8 個字符。如果密碼不符合要求，就彈出警告框，提示用戶輸入一個強密碼，并返回 false。如果符合要求，則返回 true。
四、表單提交
完成表單驗證后，我們需要將驗證信息提交給前端或后端服務器進行處理。下面是一個表單提交的例子：

function submitForm() {
if (validateForm() && validateEmail() && validatePassword()) {
document.getElementById("myForm").submit();
alert("Form submitted successfully!");
} else {
alert("Form validation failed!");
}
}

在上面的代碼中，我們先用 && 運算符將表單中的所有驗證函數連接起來。如果所有驗證函數返回 true，就執行表單提交操作，并彈出提示框，告知用戶表單提交成功。如果有任何一個驗證函數返回 false，就彈出警告框，提示用戶表單驗證失敗。
總結
本文從必填項驗證、郵箱驗證、密碼驗證和表單提交四個方面介紹了 JavaScript 表單驗證的例子，對前端開發的初學者十分有幫助。在實際開發過程中，我們還可以根據具體需求，對表單進行更加復雜的驗證，提高表單的安全性和用戶體驗。