<、p>HTML form表單是網頁中非常重要的元素，它允許用戶在網頁中輸入數據并將其提交到后端進行處理。當用戶提交表單時，我們需要驗證表單的輸入是否符合特定的規則，比如輸入必須是數字、電子郵件或電話號碼等等。JavaScript提供了強大的正則表達式功能，可以輕松地對表單進行有效的驗證。在這篇文章中，我們將帶您探索使用JavaScript正則表達式驗證表單的基本知識，以及如何在實際應用中使用。

為了說明正則表達式在表單驗證中的使用，我們將選取電子郵件地址驗證來作為例子。電子郵件地址驗證應該是表單驗證中最常見的一種，主要是確認輸入的電子郵件是否符合基本的格式要求。驗證電子郵件地址需要考慮以下幾個方面： - 電子郵件地址必須包含@符號。 - @符號后面必須包含英文字母。 - 郵箱地址必須符合格式要求，例如example@domain.com。 預計在座的同學已經知道我們將使用HTML表單來展示此表單驗證例子。根據我們上面的要求，我們可以通過以下簡單的JavaScript代碼實現基本的電子郵件驗證。

const email = document.getElementById('email').value;
 const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
 if(!emailRegex.test(email)) {
alert('Invalid email');
 }

以上代碼中，我們使用了test()函數來測試輸入值。如果輸入值不符合電子郵件格式的要求，那我們將會收到一條提示。接下來，讓我們來更詳細地了解一下正則表達式的基礎知識。

正則表達式是一種強大的編程工具，它允許我們按照模式來進行字符串匹配。JavaScript正則表達式中使用一些特殊字符來匹配字符串，比如 ^、$、*、+ 和 ? 等等。在我們的例子中，我們使用了^和$符號來確保整個輸入字符串都符合我們的要求。^表示字符串的開頭，$表示字符串的結束。在我們的正則表達式中，我們用[A-Z0-9._%+-]表示任何數字、大寫字母、加號、減號、下劃線、百分號、點號等字符。

與此同時，我們還將使用 + 和 * 符號。+符號表示匹配任意數量的前一個字符，而*符號則表示匹配零個或多個前一個字符。在我們的例子中，我們的正則表達式可以表示為/[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i。其中字符組[A-Z0-9._%+-]表示0到9之間的數字和任何大寫字母或符號。接下來的@符號表示字符串必須包含@符號。[A-Z0-9.-]+表示任何數字、大寫字母、減號、點號和小寫字母的字符集。注意到+號表示它可以有任意多個字符，而不是一個特定的字符。\.表示匹配點，最后的字符組[A-Z]{2,}表示匹配任何大寫字母，長度至少為兩個字符。i修飾符用于表示忽略大小寫。

在實際應用中，我們需要將上述代碼和HTML連接起來來完成表單驗證。以下是一個包含表單驗證的示例代碼：

const form = document.getElementById('myForm');
form.addEventListener('submit', (event) =>{
event.preventDefault();
const email = document.getElementById('email').value;
const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
if(!emailRegex.test(email)) {
alert('Invalid email');
return false;
}
alert('Valid email');
 });

以上代碼將在表單提交時運行，因此我們需要使用preventDefault()函數取消默認提交行為。如果驗證不通過，將會彈出 "Invalid email" 的提示，否則將彈出 "Valid email" 的提示。

總之，正則表達式是一種非常強大的工具，適用于表單驗證、數據清理等等。在本文中，我們介紹了一些JavaScript正則表達式中的基礎知識，包括特殊字符，以及如何將其應用于表單驗證。我們希望這篇文章能夠幫助您掌握這些基本知識，并開始開發更加強大和可靠的表單驗證功能。