如何修复表单验证的正确状态样式并添加校验图标？

开发者阿泽

2026-6-28

解决方案

1. 修复单个字段正确时的标绿逻辑

原代码仅在所有字段完全正确时才添加valid类，导致单个字段正确时无法标绿。需要在每个字段的验证分支中，为正确的字段单独添加valid类：

修改核心验证逻辑

在用户名和密码的验证分支里，新增else块处理正确状态：

// 验证用户名
if (username === "") {
    document.getElementById("username").classList.add("invalid");
    document.getElementById("username-error").textContent = "请输入用户名";
    errors.push("用户名不能为空。");
    document.getElementById("username-icon").textContent = "❌";
} else if (username !== "new_user") {
    document.getElementById("username").classList.add("invalid");
    document.getElementById("username-error").textContent = "用户名无效";
    errors.push("无效的用户名。");
    document.getElementById("username-icon").textContent = "❌";
} else {
    // 用户名正确时添加valid类和对勾图标
    document.getElementById("username").classList.add("valid");
    document.getElementById("username-icon").textContent = "✅";
}

// 验证密码
if (password === "") {
    document.getElementById("password").classList.add("invalid");
    document.getElementById("password-error").textContent = "请输入密码";
    errors.push("密码不能为空。");
    document.getElementById("password-icon").textContent = "❌";
} else if (password !== "123456789") {
    document.getElementById("password").classList.add("invalid");
    document.getElementById("password-error").textContent = "密码无效";
    errors.push("无效的密码。");
    document.getElementById("password-icon").textContent = "❌";
} else {
    // 密码正确时添加valid类和对勾图标
    document.getElementById("password").classList.add("valid");
    document.getElementById("password-icon").textContent = "✅";
}

同时在重置逻辑中清空图标内容：

// 重置部分新增
document.getElementById("username-icon").textContent = "";
document.getElementById("password-icon").textContent = "";

2. 添加对错图标（无需外部库）

使用Unicode字符实现图标，无需依赖外部资源，修改HTML结构并添加CSS定位：

修改HTML结构

为每个输入框添加图标容器：

<div id="login-container">
    <form id="login-form">
        <div>
            <label for="username">用户名:</label>
            <div class="input-wrap">
                <input id="username" type="text">
                <span id="username-icon" class="field-icon"></span>
            </div>
            <span id="username-error" class="error-message"></span>
        </div>

        <div>
            <label for="password">密码:</label>
            <div class="input-wrap">
                <input id="password" type="password">
                <span id="password-icon" class="field-icon"></span>
            </div>
            <span id="password-error" class="error-message"></span>
        </div>

        <input type="submit" value="登录">
    </form>
    <div id="error-messages"></div>
</div>

添加图标定位CSS

/* 新增图标定位样式 */
.input-wrap {
    position: relative;
}
.field-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    display: none;
}
/* 根据输入框状态显示对应图标 */
.valid + .field-icon {
    display: block;
    color: green;
}
.invalid + .field-icon {
    display: block;
    color: red;
}

完整代码整合

HTML

<div id="login-container">
    <form id="login-form">
        <div>
            <label for="username">用户名:</label>
            <div class="input-wrap">
                <input id="username" type="text">
                <span id="username-icon" class="field-icon"></span>
            </div>
            <span id="username-error" class="error-message"></span>
        </div>

        <div>
            <label for="password">密码:</label>
            <div class="input-wrap">
                <input id="password" type="password">
                <span id="password-icon" class="field-icon"></span>
            </div>
            <span id="password-error" class="error-message"></span>
        </div>

        <input type="submit" value="登录">
    </form>
    <div id="error-messages"></div>
</div>

CSS

body {
    box-sizing: border-box;
    font-family: sans-serif;
}

#login-container {
    width: 460px;
    margin: 0 auto;
}

form label,
form input {
    width: 100%;
    box-sizing: border-box;
}

form input {
    padding: 8px;
}

form label {
    font-weight: bold;
}

form div {
    margin: 16px 0px;
}

.invalid {
    border: 2px solid red;
}

.valid {
    border: 2px solid green;
}

.error-message {
    color: red;
    margin-top: 8px;
}

.success-message {
    color: green;
    margin-top: 8px;
}

.input-wrap {
    position: relative;
}
.field-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    display: none;
}
.valid + .field-icon {
    display: block;
    color: green;
}
.invalid + .field-icon {
    display: block;
    color: red;
}

JS

document.getElementById("login-form").addEventListener("submit", function (event) {
    event.preventDefault(); // 阻止表单提交

    // 重置之前的验证样式和信息
    document.getElementById("username").classList.remove("invalid", "valid");
    document.getElementById("password").classList.remove("invalid", "valid");
    document.getElementById("error-messages").innerHTML = "";
    document.getElementById("username-error").textContent = "";
    document.getElementById("password-error").textContent = "";
    document.getElementById("username-icon").textContent = "";
    document.getElementById("password-icon").textContent = "";

    // 获取输入值
    var username = document.getElementById("username").value.trim();
    var password = document.getElementById("password").value.trim();

    var errors = [];

    // 验证用户名
    if (username === "") {
        document.getElementById("username").classList.add("invalid");
        document.getElementById("username-error").textContent = "请输入用户名";
        errors.push("用户名不能为空。");
        document.getElementById("username-icon").textContent = "❌";
    } else if (username !== "new_user") {
        document.getElementById("username").classList.add("invalid");
        document.getElementById("username-error").textContent = "用户名无效";
        errors.push("无效的用户名。");
        document.getElementById("username-icon").textContent = "❌";
    } else {
        document.getElementById("username").classList.add("valid");
        document.getElementById("username-icon").textContent = "✅";
    }

    // 验证密码
    if (password === "") {
        document.getElementById("password").classList.add("invalid");
        document.getElementById("password-error").textContent = "请输入密码";
        errors.push("密码不能为空。");
        document.getElementById("password-icon").textContent = "❌";
    } else if (password !== "123456789") {
        document.getElementById("password").classList.add("invalid");
        document.getElementById("password-error").textContent = "密码无效";
        errors.push("无效的密码。");
        document.getElementById("password-icon").textContent = "❌";
    } else {
        document.getElementById("password").classList.add("valid");
        document.getElementById("password-icon").textContent = "✅";
    }

    // 显示错误信息
    if (errors.length > 0) {
        var errorMessageHTML = "<ul class='error-message'>";
        errors.forEach(function (error) {
            errorMessageHTML += "<li>" + error + "</li>";
        });
        errorMessageHTML += "</ul>";
        document.getElementById("error-messages").innerHTML = errorMessageHTML;
    } else {
        // 登录成功
        document.getElementById("error-messages").innerHTML = "<p class='success-message'>登录成功!</p>";
    }
});

内容的提问来源于stack exchange，提问作者Central-Attack

如何修复表单验证的正确状态样式并添加校验图标？

1. 修复单个字段正确时的标绿逻辑 #

修改核心验证逻辑 #

2. 添加对错图标（无需外部库） #

修改HTML结构 #

添加图标定位CSS #

完整代码整合 #

HTML #

CSS #

JS #