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

const errorImg = document.querySelectorAll(".error-img");
// ...
if (!inputs.value) { // 这里的inputs也是一个HTMLCollection，直接访问.value是不正确的
    errorImg.classList.remove("hidden"); // 错误发生在这里
}

const errorImgs = document.querySelectorAll(".error-img");

// 隐藏所有错误图片
errorImgs.forEach(img => {
    img.classList.add("hidden");
});

// 显示特定错误图片（例如，第一个）
// errorImgs[0].classList.remove("hidden");

<form action="#" class="form">
    <div class="first-name-div form-control">
        <input type="text" name="fname" id="firstName" placeholder="First Name">
        @@##@@
        <small class="error-message hidden"></small>
    </div>
    <div class="last-name-div form-control">
        <input type="text" name="lname" id="lastName" placeholder="Last Name">
        @@##@@
        <small class="error-message hidden"></small>
    </div>
    <div class="email-div form-control">
        <input type="email" name="email-address" id="email" placeholder="Email Address">
        @@##@@
        <small class="error-message hidden"></small>
    </div>
    <div class="password-div form-control">
        <input type="password" name="password" id="password" placeholder="Password">
        @@##@@
        <small class="error-message hidden"></small>
    </div>
    <div class="submit-btn-div">
        <button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
    </div>
</form>

/* 错误图标和错误信息的基本样式 */
.form-control {
    position: relative; /* 确保错误图标能相对于父元素定位 */
    margin-bottom: 20px; /* 为错误信息留出空间 */
}

.form-control input {
    /* ... 现有样式 ... */
    border: solid 0.09rem hsl(246, 25%, 77%); /* 默认边框 */
}

.form-control.error input {
    border-color: hsl(0, 100%, 74%); /* 错误状态下的边框颜色 */
}

.error-img {
    position: absolute;
    top: 50%;
    right: 22px; /* 根据实际布局调整 */
    transform: translateY(-50%);
    pointer-events: none; /* 确保不影响输入框点击 */
}

.error-message {
    color: hsl(0, 100%, 74%);
    font-size: 0.7rem;
    font-style: italic;
    margin-top: 5px;
    display: block; /* 确保错误信息独占一行 */
    text-align: right; /* 靠右对齐 */
    padding-right: 22px; /* 与错误图标对齐 */
}

/* 隐藏元素的通用类 */
.hidden {
    display: none !important;
}

"use strict";

const form = document.querySelector(".form");
const firstNameInput = document.getElementById("firstName");
const lastNameInput = document.getElementById("lastName");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
const submitBtn = document.getElementById("submit-btn");

// 辅助函数：显示错误状态
function showError(input, message) {
    const formControl = input.parentElement; // 获取父级div.form-control
    formControl.classList.add("error"); // 添加错误类，改变边框颜色
    const errorImg = formControl.querySelector(".error-img");
    const errorMessage = formControl.querySelector(".error-message");

    if (errorImg) errorImg.classList.remove("hidden");
    if (errorMessage) {
        errorMessage.innerText = message;
        errorMessage.classList.remove("hidden");
    }
}

// 辅助函数：清除错误状态
function clearError(input) {
    const formControl = input.parentElement;
    formControl.classList.remove("error");
    const errorImg = formControl.querySelector(".error-img");
    const errorMessage = formControl.querySelector(".error-message");

    if (errorImg) errorImg.classList.add("hidden");
    if (errorMessage) errorMessage.classList.add("hidden");
}

// 验证必填字段
function checkRequired(inputs) {
    let isValid = true;
    inputs.forEach(input => {
        if (input.value.trim() === "") {
            showError(input, `${getFieldName(input)} 不能为空`);
            isValid = false;
        } else {
            clearError(input);
        }
    });
    return isValid;
}

// 验证电子邮件格式
function checkEmail(input) {
    const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
    if (re.test(input.value.trim())) {
        clearError(input);
        return true;
    } else {
        showError(input, "电子邮件格式不正确");
        return false;
    }
}

// 获取字段名称，用于错误信息
function getFieldName(input) {
    // 将id的首字母大写，例如firstName -> First Name
    return input.id.charAt(0).toUpperCase() + input.id.slice(1).replace(/([A-Z])/g, ' $1');
}

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

    // 检查所有必填字段
    const requiredFieldsValid = checkRequired([firstNameInput, lastNameInput, emailInput, passwordInput]);

    // 检查电子邮件格式
    const emailValid = checkEmail(emailInput);

    // 如果所有验证都通过，则可以提交表单（这里只是打印成功信息）
    if (requiredFieldsValid && emailValid) {
        alert("表单验证成功，可以提交！");
        // 实际应用中，这里会发送AJAX请求或执行其他提交逻辑
        // form.submit(); // 如果需要传统表单提交
    }
});

// 实时验证（可选）：可以在输入字段失去焦点时进行验证
[firstNameInput, lastNameInput, emailInput, passwordInput].forEach(input => {
    input.addEventListener('blur', () => {
        if (input.value.trim() === "") {
            showError(input, `${getFieldName(input)} 不能为空`);
        } else {
            clearError(input);
            if (input.type === "email") {
                checkEmail(input);
            }
        }
    });
    // 可以在输入时清除错误，但通常在blur或submit时显示错误
    input.addEventListener('input', () => {
        clearError(input);
    });
});