防止預設行為與表單驗證

1.preventDefault()–防止預設行為

(1)連結的預設行為
假設我們有一個超連結，當使用者點擊它時，會跳轉到指定的網址。如果我們想阻止這個預設行為並顯示一條訊息，可以這樣做：

<a href="https://example.com" id="link">點擊我</a>

<script>
    let link = document.getElementById("link");

    link.addEventListener("click", function(event) {
        event.preventDefault();  // 阻止預設的跳轉行為
        console.log("連結點擊事件，但不會跳轉");
    });
</script>

在這個範例中，點擊連結時不會跳轉到https://example.com，而是顯示訊息「連結點擊事件，但不會跳轉」。

(2)表單的預設行為
表單的預設行為是在提交時刷新頁面，這在某些情況下是不希望的，尤其當你要進行資料驗證或異步提交時。我們可以使用 preventDefault() 來阻止表單的提交行為。

<form id="myForm">
    <input type="text" id="name" placeholder="輸入名字">
    <button type="submit">提交</button>
</form>

<script>
    let form = document.getElementById("myForm");

    form.addEventListener("submit", function(event) {
        event.preventDefault();  // 阻止表單的預設提交行為
        console.log("表單已被攔截，不會提交");
    });
</script>

當點擊提交按鈕時，表單不會被提交，而是攔截了提交動作並顯示訊息。

2.表單驗證

(1)JavaScript表單驗證
驗證使用者是否輸入了名字：

<form id="myForm">
    <label for="name">名字:</label>
    <input type="text" id="name" placeholder="輸入名字">
    <span id="error" style="color: red;"></span>
    <button type="submit">提交</button>
</form>

<script>
    let form = document.getElementById("myForm");
    let nameInput = document.getElementById("name");
    let errorMsg = document.getElementById("error");

    form.addEventListener("submit", function(event) {
        if (nameInput.value.trim() === "") {
            event.preventDefault();  // 阻止表單提交
            errorMsg.textContent = "名字不能為空！";
        } else {
            errorMsg.textContent = "";  // 清除錯誤訊息
            console.log("表單提交成功！");
        }
    });
</script>