JavaScript - Forms API：初學者的指南

你好，未來的 JavaScript 巫師們！今天，我們將踏上一段令人興奮的旅程，進入網頁表單的世界以及強大的 JavaScript Forms API。別擔心如果你從未寫過一行代碼——我將成為你親切導遊，我們將一步步攻克這個主題。所以，拿起你喜歡的飲料，放鬆身心，讓我們一起深入探索！

JavaScript - Forms API

網頁表單介紹

在我們跳進 Forms API 之前，讓我們先來聊聊網頁表單。你可能已在瀏覽網際網路時無數次遇到這些表單。記得上次你註冊新帳戶或填寫線上問卷嗎？沒錯——你當時正在與網頁表單互動！

網頁表單就像數字化文件。它們使用戶輸入數據，然後將這些數據發送到伺服器進行處理。但這裡有個有趣的地方：透過 JavaScript，我們可以使這些表單變得更聰明、更互動。

Web Forms API

Web Forms API 是 JavaScript 提供的一套工具，讓我們能以強大的方式處理表單。這就像給你的表單進行了一次腦力升級！

存取表單元素

讓我們從基礎開始。我們如何實際上使用 JavaScript 獲取表單？這比你想像的還要簡單！

// 假設我們有一個 ID 為 "myForm" 的表單
let myForm = document.getElementById("myForm");

// 或者如果我們想獲取頁面上所有的表單
let allForms = document.forms;

在這個例子中，document.getElementById("myForm") 就像要求 JavaScript 在我們的網頁上找到 ID 為 "myForm" 的表單。這就像是呼叫教室裡學生的名字——JavaScript 將為我們定位那個特定的表單。

第二行，document.forms，給我們頁面上所有的表單。這就像得到學校所有學生的名單！

處理表單提交

現在既然我們可以訪問我們的表單，讓我們看看當有人提交表單時我們如何處理：

myForm.addEventListener("submit", function(event) {
event.preventDefault(); // 停止表單正常提交
console.log("表單已提交！");
// 在這裡你可以添加代碼來處理表單數據
});

這段代碼就像設置了一個特殊警報，當有人嘗試提交表單時它會響起。preventDefault() 方法特別重要——這就像是告訴表單："等一下，不要現在就發送數據。我們想先對它做一些處理！"

約束驗證 DOM 方法

現在，讓我們來聊聊確保我們表單中的數據是正確的。這叫做驗證，對於確保我們從用戶那裡得到正確的資訊至關重要。

checkValidity() 方法

表單驗證中最有用的方法之一是 checkValidity()。這就像有個老師快速地檢查學生的作業，確保一切井然有序。

let emailInput = document.getElementById("email");

emailInput.addEventListener("blur", function() {
if (!emailInput.checkValidity()) {
console.log("請輸入有效的電子郵件地址");
}
});

在這個例子中，我們在用戶完成輸入（"blur" 事件的含義）時檢查電子郵件輸入是否有效。如果它無效，我們將在控制台輸出一個消息。在實際應用中，你可能想要將這個消息顯示給用戶。

reportValidity() 方法

當 checkValidity() 只檢查輸入是否有效時，reportValidity() 會進一步。它不僅檢查，還會在出錯時向用戶顯示消息。

let submitButton = document.getElementById("submit");

submitButton.addEventListener("click", function() {
if (!myForm.reportValidity()) {
console.log("表單有錯誤。請修正它們。");
} else {
console.log("表單有效。正在提交...");
}
});

這就像有個老師不僅檢查作業，還為學生寫下需要修正的評語。

約束驗證 DOM 屬性

現在我們已經看過一些方法，讓我們來看看一些可以幫助我們進行表單驗證的屬性。

validity 屬性

validity 屬性是關於輸入有效性的大量信息的強力工具。這就像對每個表單字段的一份詳細報告卡。

let passwordInput = document.getElementById("password");

passwordInput.addEventListener("input", function() {
if (passwordInput.validity.tooShort) {
console.log("密碼太短！");
}
});

在這個例子中，我們在用戶每次輸入時檢查密碼是否太短。這就像有個老師在學生旁邊給予即時反饋！

'validity' 屬性的屬性

validity 屬性本身有幾個屬性，每個都告訴我們關於輸入狀態的特定信息。讓我們看看其中一些：

屬性	描述
`valid`	如果元素滿足所有驗證約束，則為 `true`
`valueMissing`	如果元素有 `required` 屬性但沒有值，則為 `true`
`typeMismatch`	如果值不符合所需的語法（如電子郵件地址），則為 `true`
`patternMismatch`	如果值不匹配指定的 `pattern`，則為 `true`
`tooLong`	如果值超過 `maxLength`，則為 `true`
`tooShort`	如果值短於 `minLength`，則為 `true`
`rangeUnderflow`	如果值小於 `min` 屬性，則為 `true`
`rangeOverflow`	如果值大於 `max` 屬性，則為 `true`
`stepMismatch`	如果值不符合 `step` 屬性的規則，則為 `true`

以下是如何使用其中一些的例子：

let ageInput = document.getElementById("age");

ageInput.addEventListener("input", function() {
if (ageInput.validity.rangeUnderflow) {
console.log("你必須至少年滿 18 歲！");
} else if (ageInput.validity.rangeOverflow) {
console.log("你確定你那麼老嗎？");
} else if (ageInput.validity.valid) {
console.log("年齡看起來不錯！");
}
});

這段代碼檢查輸入的年齡是否太低、太高，或者剛剛好。這就像 Goldilocks 檢查粥，但對於表單輸入！

結論

這就是了，各位！我們已經開始進入 JavaScript Forms API 的世界。我們學習了如何訪問表單、處理提交、驗證輸入，甚至深入輸入有效性的細節。

記住，掌握這些概念需要練習。如果一切不會立即清晰，請不要氣餒。就像學騎自行車一樣，起初可能會有些晃動，但很快你就會輕鬆自如地騎行，並且能夠輕鬆創建交互式且用戶友好的表單！

持續編程，持續學習，最重要的是，用 JavaScript 撒開蹄子享受樂趣！

Credits: Image by storyset

上一教程:

JavaScript - 儲存API

下一教程:

JavaScript - Worker API