表单验证中的本地DOM操作与错误提示处理

"use strict"

const form = document.querySelector(".form");
const inputs = document.getElementsByTagName("input"); // 获取所有input元素
const errorImg = document.querySelectorAll(".error-img"); // 获取所有错误图片元素
const submitBtn = document.getElementById("submit-btn");

submitBtn.addEventListener("click", (e) => {
    e.preventDefault();

    if(!inputs.value){ // 错误：inputs是一个HTMLCollection，没有.value属性
        errorImg.classList.remove("hidden"); // 错误：errorImg是一个NodeList，没有classList属性
    } else {
        errorImg.classList.add("hidden");
    }
});

<!-- 示例：电子邮件输入框及其错误图片 -->
<div class="email-div">
    <input type="email" name="email-address" id="email" placeholder="email@example.com">
    @@##@@
    <!-- 可以添加一个用于显示错误文本的p标签 -->
    <p class="error-text hidden"></p>
</div>

"use strict";

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

// 获取所有包含输入框和错误图片的父级div
const inputDivs = document.querySelectorAll(".right-form > div");

// 电子邮件正则表达式
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

// 验证单个输入字段的函数
function validateInput(inputElement, errorImgElement, errorTextElement) {
    let isValid = true;
    const value = inputElement.value.trim();
    const inputId = inputElement.id;
    let errorMessage = "";

    // 移除之前的错误状态
    errorImgElement.classList.add("hidden");
    if (errorTextElement) {
        errorTextElement.classList.add("hidden");
        errorTextElement.textContent = "";
    }
    inputElement.classList.remove("input-error-border"); // 移除错误边框

    if (value === "") {
        isValid = false;
        errorMessage = `${inputElement.placeholder || inputElement.name} 不能为空`;
    } else if (inputId === "email" && !emailRegex.test(value)) {
        isValid = false;
        errorMessage = "请输入有效的电子邮件地址";
    }

    if (!isValid) {
        errorImgElement.classList.remove("hidden");
        if (errorTextElement) {
            errorTextElement.classList.remove("hidden");
            errorTextElement.textContent = errorMessage;
        }
        inputElement.classList.add("input-error-border"); // 添加错误边框
    }
    return isValid;
}

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

    let formIsValid = true;

    inputDivs.forEach(div => {
        const input = div.querySelector("input");
        const errorImg = div.querySelector(".error-img");
        const errorText = div.querySelector(".error-text"); // 假设有错误文本P标签

        if (input && errorImg) { // 确保找到了输入框和错误图片
            // 调用验证函数，如果任何一个输入框验证失败，则整个表单验证失败
            if (!validateInput(input, errorImg, errorText)) {
                formIsValid = false;
            }
        }
    });

    if (formIsValid) {
        alert("表单提交成功！");
        form.submit(); // 或者执行其他提交逻辑
    } else {
        alert("请检查表单中的错误！");
    }
});

// 实时验证（可选）：用户输入时立即验证
inputDivs.forEach(div => {
    const input = div.querySelector("input");
    const errorImg = div.querySelector(".error-img");
    const errorText = div.querySelector(".error-text");

    if (input && errorImg) {
        input.addEventListener("input", () => {
            validateInput(input, errorImg, errorText);
        });
        // 失去焦点时也进行验证
        input.addEventListener("blur", () => {
            validateInput(input, errorImg, errorText);
        });
    }
});

/* ... 现有CSS ... */

/* 隐藏错误元素 */
.hidden {
    display: none !important; /* 使用!important确保覆盖其他样式 */
}

/* 错误图片定位 */
.email-div, .first-name-div, .last-name-div, .password-div {
    position: relative; /* 确保子元素的绝对定位是相对于这个父元素 */
    margin-bottom: 25px; /* 增加底部间距，为错误文本留出空间 */
}

.error-img {
    position: absolute;
    top: 50%; /* 垂直居中 */
    right: 15px; /* 距离右侧的距离 */
    transform: translateY(-50%); /* 垂直居中调整 */
    width: 24px; /* 根据实际图标大小调整 */
    height: 24px;
    pointer-events: none; /* 防止图片阻挡输入框的点击事件 */
}

/* 错误文本样式 */
.error-text {
    color: hsl(0, 100%, 74%); /* 红色 */
    font-size: 0.7rem;
    font-style: italic;
    text-align: right; /* 靠右对齐 */
    margin-top: 5px; /* 与输入框的间距 */
    position: absolute; /* 绝对定位，防止影响布局 */
    bottom: -20px; /* 定位在输入框下方 */
    right: 0;
    width: 100%; /* 确保文本能完整显示 */
}

/* 输入框错误边框 */
.input-error-border {
    border-color: hsl(0, 100%, 74%) !important; /* 红色边框 */
    border-width: 2px !important;
}

/* 优化输入框样式，使其与错误图标不重叠 */
input {
    padding-right: 45px; /* 为错误图标留出空间 */
}

<div class="first-name-div">
    <input type="text" name="fname" id="first-input" placeholder="First Name">
    @@##@@
    <p class="error-text hidden"></p> <!-- 添加错误文本元素 -->
</div>
<div class="last-name-div">
    <input type="text" name="lname" id="last-input" placeholder="Last Name">
    @@##@@
    <p class="error-text hidden"></p>
</div>
<div class="email-div">
    <input type="email" name="email-address" id="email" placeholder="Email Address">
    @@##@@
    <p class="error-text hidden"></p>
</div>
<div class="password-div">
    <input type="password" name="password" id="password" placeholder="Password">
    @@##@@
    <p class="error-text hidden"></p>
</div>