使用HTML、CSS和JavaScript实现本地表单验证及DOM操作的教程

<form action="#" class="form">
    <div class="right-form">
        <div class="first-name-div">
            <input type="text" name="fname" id="first-input" placeholder="First Name">
            <img class="error-img hidden" src="images/icon-error.svg" alt="Error">
            <small class="error-message"></small>
        </div>
        <div class="last-name-div">
            <input type="text" name="lname" id="last-input" placeholder="Last Name">
            <img class="error-img hidden" src="images/icon-error.svg" alt="Error">
            <small class="error-message"></small>
        </div>
        <div class="email-div">
            <input type="email" name="email-address" id="email" placeholder="Email Address">
            <img class="error-img hidden" src="images/icon-error.svg" alt="Error">
            <small class="error-message"></small>
        </div>
        <div class="password-div">
            <input type="password" name="password" id="password" placeholder="Password">
            <img class="error-img hidden" src="images/icon-error.svg" alt="Error">
            <small class="error-message"></small>
        </div>
        <div class="submit-btn-div">
            <button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
        </div>
    </div>
</form>

/* ... 其他样式 ... */

.error-img {
    position: absolute;
    top: 6px; /* 根据实际布局调整 */
    right: 22px; /* 根据实际布局调整 */
    display: none; /* 默认隐藏 */
}

.hidden {
    display: none !important; /* 使用!important确保覆盖其他样式 */
}

.error-message {
    color: hsl(0, 100%, 74%); /* 错误文本颜色 */
    font-size: 0.75rem;
    font-style: italic;
    text-align: right;
    margin-top: 5px;
    display: none; /* 默认隐藏 */
}

/* 当输入框无效时，可以添加边框样式 */
input.invalid {
    border-color: hsl(0, 100%, 74%);
}

"use strict";

const form = document.querySelector(".form");
const submitBtn = document.getElementById("submit-btn");

// 获取所有输入字段和它们对应的错误图片/消息元素
const inputFields = document.querySelectorAll(".right-form input");

// 辅助函数：显示错误
function showError(inputElement, message) {
    const parentDiv = inputElement.parentElement; // 获取父级div (e.g., .first-name-div)
    const errorImg = parentDiv.querySelector(".error-img");
    const errorMessage = parentDiv.querySelector(".error-message");

    if (errorImg) {
        errorImg.classList.remove("hidden");
        errorImg.style.display = 'block'; // 确保显示
    }
    if (errorMessage) {
        errorMessage.textContent = message;
        errorMessage.classList.remove("hidden");
        errorMessage.style.display = 'block'; // 确保显示
    }
    inputElement.classList.add("invalid"); // 添加无效样式
}

// 辅助函数：隐藏错误
function hideError(inputElement) {
    const parentDiv = inputElement.parentElement;
    const errorImg = parentDiv.querySelector(".error-img");
    const errorMessage = parentDiv.querySelector(".error-message");

    if (errorImg) {
        errorImg.classList.add("hidden");
        errorImg.style.display = 'none'; // 确保隐藏
    }
    if (errorMessage) {
        errorMessage.classList.add("hidden");
        errorMessage.style.display = 'none'; // 确保隐藏
    }
    inputElement.classList.remove("invalid"); // 移除无效样式
}

// 验证邮箱格式的正则表达式
const isValidEmail = (email) => {
    // 简单的邮箱验证正则表达式
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
};

// 完整的表单验证函数
function validateForm() {
    let isValid = true;

    inputFields.forEach(input => {
        const inputId = input.id;
        const inputValue = input.value.trim(); // 去除首尾空格

        hideError(input); // 每次验证前先隐藏所有错误

        if (inputValue === "") {
            showError(input, `${input.placeholder || input.name} 不能为空`);
            isValid = false;
        } else if (inputId === "email" && !isValidEmail(inputValue)) {
            showError(input, "邮箱格式不正确");
            isValid = false;
        }
        // 可以添加更多验证规则，例如密码长度等
    });

    return isValid;
}

// 监听表单提交事件
form.addEventListener("submit", (e) => {
    e.preventDefault(); // 阻止表单默认提交行为

    if (validateForm()) {
        // 如果所有字段都验证通过，可以执行提交操作
        alert("表单提交成功！");
        form.reset(); // 清空表单
        // 或者使用 fetch/XMLHttpRequest 提交到后端
    } else {
        console.log("表单验证失败，请检查输入。");
    }
});

// 实时验证：当用户输入时，也可以进行验证
inputFields.forEach(input => {
    input.addEventListener("input", () => {
        // 可以在这里进行实时验证，或者只在blur事件时验证
        // 例如：
        // if (input.value.trim() !== "") {
        //     hideError(input);
        // }
    });
    input.addEventListener("blur", () => {
        // 当输入框失去焦点时进行验证
        const inputId = input.id;
        const inputValue = input.value.trim();

        hideError(input); // 每次验证前先隐藏错误

        if (inputValue === "") {
            showError(input, `${input.placeholder || input.name} 不能为空`);
        } else if (inputId === "email" && !isValidEmail(inputValue)) {
            showError(input, "邮箱格式不正确");
        }
    });
});