JavaScript - DOM Forms：初學者指南

Hello, 有志者！今天，我們將要進入JavaScript和DOM Forms的精彩世界。作為你們友好的鄰居電腦老師，我將指導你們一步一步地開展這次旅程。所以，拿起你們最喜歡的飲料，放鬆身心，讓我們一起踏上這次冒險吧！

JavaScript - DOM Forms

The DOM Forms

在我們深入JavaScript和表單之前，讓我們先來了解什麼是DOM Forms。DOM代表的是Document Object Model，它基本上是JavaScript與網頁上的HTML元素交互的一種方式。

把DOM想像成你網頁的家庭樹。每個元素就像是一個家庭成員，而JavaScript就是那個能與所有人交談並讓事情發生的酷表哥！

現在，當提到表單時，它們就像是網絡世界的交互問卷。它們讓用戶輸入數據，進行選擇，並將信息提交給網站。讓我們來看看一個簡單的HTML表單：

<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>

這個表單有一個名稱的輸入字段和一個提交按鈕。相當直接了當，不是嗎？現在，讓我們看看我們如何使用JavaScript與這個表單交互！

JavaScript Form Submission

當用戶填寫完表單並點擊提交按鈕時，我們通常想在將數據發送到伺服器之前對其進行一些操作。這正是JavaScript派上用場的地方！

以下是如何使用JavaScript處理表單提交的例子：

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單正常提交

var name = document.getElementById('name').value;
console.log('Hello, ' + name + '!');
});

讓我們分解一下：

我們使用document.getElementById('myForm')選擇我們的表單。
我們為'submit'事件添加了一個事件監聽器。
event.preventDefault()阻止了表單的正常提交（這會刷新頁面）。
我們獲得名稱輸入的值並將問候語記錄到控制台。

現在，當你提交表單時，頁面不會刷新，你會在控制台看到問候語。酷炫吧？

JavaScript Form Validation

表單驗證就像夜總會裡的友好保鏢。它在讓數據通過之前會檢查一切是否井然有序。讓我們看看如何使用JavaScript驗證我們的表單：

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();

var name = document.getElementById('name').value;

if (name.trim() === '') {
alert('Please enter your name!');
} else {
console.log('Hello, ' + name + '!');
}
});

在這個例子中，我們檢查名稱字段是否為空（或者只包含空格）。如果是，我們會顯示一個提示，要求用戶輸入他們的名字。如果不是，我們記錄問候語。

JavaScript Form Data Validation

有時候，我們需要驗證更複雜的數據。讓我們說我們想在表單中添加一個電子郵件字段，並確保它是一個有效的電子郵件地址：

<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>

以下是如何驗證它的方法：

document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault();

var name = document.getElementById('name').value;
var email = document.getElementById('email').value;

if (name.trim() === '') {
alert('Please enter your name!');
return;
}

if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
alert('Please enter a valid email address!');
return;
}

console.log('Hello, ' + name + '! We\'ll contact you at ' + email);
});

在這個例子中，我們使用正則表達式來檢查電子郵件是否有效。不要擔心這看起來像天書 - 正則表達式是另一個主題！

Form Validation Using HTML Constraints

現在，這裡有一個小秘訣：HTML5有一些內置的表單驗證功能，可以讓我們的生活變得更容易。讓我們更新我們的表單來使用它們：

<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Submit</button>
</form>

通過給我們的輸入添加required屬性並使用type="email"對於電子郵件字段，我們得到了一些基本的驗證！如果這些字段為空或無效，瀏覽器將阻止表單提交並顯示錯誤信息。

但我們仍然可以使用JavaScript來定制這種行為：

document.getElementById('myForm').addEventListener('submit', function(event) {
if (!this.checkValidity()) {
event.preventDefault();
alert('Please fill out all fields correctly!');
} else {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
console.log('Hello, ' + name + '! We\'ll contact you at ' + email);
}
});

這段代碼檢查表單是否根據HTML約束有效。如果無效，我們阻止提交並顯示提示。如果有效，我們繼續我們的問候。

Conclusion

就是这样，各位！我們一起穿越了JavaScript和DOM Forms的土地，從基本的提交到驗證等等。記住，表單就像是你的網站與其用戶之間的對話。有了JavaScript，你就能確保這次對話順暢進行，並且讓雙方都能相互理解。

這裡是我們使用過的方法的快速參考表：

方法	描述
`document.getElementById()`	根據ID選擇元素
`addEventListener()`	為元素附加事件處理器
`event.preventDefault()`	停止事件的默認行為
`element.value`	獲取或設定表單元素的值
`alert()`	為用戶顯示彈出消息
`console.log()`	將消息記錄到控制台
`form.checkValidity()`	檢查表單是否滿足所有驗證約束

繼續練習，持續編程，在你意識到之前，你將能夠創造出令人驚奇的交互式網頁體驗！記住，每個專家都曾經是初學者。所以如果事情一開始沒有立即明朗，不要氣餒。堅持下去，你會對你能夠實現的事情感到驚奇！

Credits: Image by storyset