JavaScript表单验证中的DOM操作：NodeList处理与样式控制

const errorImg = document.querySelectorAll(".error-img");
// ...
if (!inputs.value) {
    errorImg.classList.remove("hidden"); // 错误：errorImg是一个NodeList，没有classList属性
}

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

// 遍历NodeList中的每个错误图片元素
errorImgs.forEach(img => {
    // 对每个图片元素执行操作，例如移除"hidden"类
    img.classList.remove("hidden");
});

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

for (const img of errorImgs) {
    // 对每个图片元素执行操作
    img.classList.remove("hidden");
}

const errorImgsArray = Array.from(document.querySelectorAll(".error-img"));
// 或者 const errorImgsArray = [...document.querySelectorAll(".error-img")];

errorImgsArray.forEach(img => {
    img.classList.remove("hidden");
});

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

if (errorImgs.length > 0) {
    // 只操作第一个匹配的错误图片
    errorImgs[0].classList.remove("hidden");
}

<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 icon">
    <small class="error-message hidden">First Name cannot be empty</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 icon">
    <small class="error-message hidden">Looks like this is not an email</small>
</div>
<div class="submit-btn-div">
    <button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>
</div>

.hidden {
    display: none;
}

/* 错误图片和消息的样式 */
.error-img {
    position: absolute;
    top: 50%;
    right: 15px; /* 调整位置 */
    transform: translateY(-50%);
    width: 20px; /* 调整大小 */
    height: 20px;
}

.error-message {
    color: hsl(0, 100%, 74%); /* 红色错误文本 */
    font-size: 0.75rem;
    text-align: right;
    margin-top: 5px;
    display: block; /* 确保消息独占一行 */
}

input.error-border {
    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, messageElement, errorImgElement) {
    inputElement.classList.add("error-border");
    errorImgElement.classList.remove("hidden");
    messageElement.textContent = messageElement.dataset.errorMessage || "This field cannot be empty"; // 使用data属性获取特定错误信息
    messageElement.classList.remove("hidden");
}

// 辅助函数：隐藏错误
function hideError(inputElement, messageElement, errorImgElement) {
    inputElement.classList.remove("error-border");
    errorImgElement.classList.add("hidden");
    messageElement.classList.add("hidden");
}

// 验证单个输入字段
function validateInput(input) {
    const parentDiv = input.parentElement; // 获取父div，以便找到兄弟元素
    const errorImg = parentDiv.querySelector(".error-img");
    const errorMessage = parentDiv.querySelector(".error-message");

    // 为错误消息元素设置data属性，以便存储不同的错误文本
    if (!errorMessage.dataset.errorMessage) {
        if (input.type === "email") {
            errorMessage.dataset.errorMessage = "Looks like this is not an email";
        } else {
            errorMessage.dataset.errorMessage = `${input.placeholder.split(' ')[0]} cannot be empty`;
        }
    }

    if (input.value.trim() === "") { // 检查是否为空
        showError(input, errorMessage, errorImg);
        return false;
    } else if (input.type === "email" && !input.validity.valid) { // 检查邮件格式
        showError(input, errorMessage, errorImg);
        return false;
    } else {
        hideError(input, errorMessage, errorImg);
        return true;
    }
}

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

    let formIsValid = true;
    inputFields.forEach(input => {
        if (!validateInput(input)) {
            formIsValid = false; // 只要有一个字段验证失败，整个表单就无效
        }
    });

    if (formIsValid) {
        // 如果所有字段都有效，可以执行表单提交或其他操作
        alert("Form submitted successfully!");
        form.submit(); // 实际提交表单
    }
});

// 可选：实时验证，当用户输入时进行验证
inputFields.forEach(input => {
    input.addEventListener("input", () => {
        validateInput(input);
    });
});