插件窝干货文章 JavaScript表单校验：如何在输入框下方显示带图片的错误提示？

JavaScript表单校验：如何在输入框下方显示带图片的错误提示？

usernameError username 错误表单 810 来源： 2025-03-19

在JavaScript中实现表单校验并在输入框下方显示带图片的错误提示，可以通过以下步骤完成：

1. HTML结构

首先，创建一个包含输入框和错误提示的HTML结构。错误提示通常是一个隐藏的<div>或<span>，里面包含错误信息和图片。

<form id="myForm">
    <div class="form-group">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username">
        <div class="error-message" id="usernameError">
            <img src="error-icon.png" alt="错误图标">
            <span>用户名不能为空</span>
        </div>
    </div>
    <button type="submit">提交</button>
</form>

2. CSS样式

使用CSS来控制错误提示的显示和隐藏，并设置样式。

.error-message {
    display: none; /* 默认隐藏 */
    color: red;
    margin-top: 5px;
}

.error-message img {
    vertical-align: middle;
    margin-right: 5px;
}

3. JavaScript校验逻辑

使用JavaScript来监听表单的提交事件，并在输入框为空时显示错误提示。

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单提交

    var username = document.getElementById('username').value;
    var usernameError = document.getElementById('usernameError');

    if (username.trim() === '') {
        usernameError.style.display = 'block'; // 显示错误提示
    } else {
        usernameError.style.display = 'none'; // 隐藏错误提示
        // 这里可以继续处理表单提交逻辑
        alert('表单提交成功！');
    }
});

4. 动态添加错误提示

如果你希望在输入框失去焦点时立即显示错误提示，而不是等到表单提交时，可以使用blur事件。

document.getElementById('username').addEventListener('blur', function() {
    var username = this.value;
    var usernameError = document.getElementById('usernameError');

    if (username.trim() === '') {
        usernameError.style.display = 'block';
    } else {
        usernameError.style.display = 'none';
    }
});

5. 完整示例

将上述代码整合在一起，完整的示例如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单校验示例</title>
    <style>
        .error-message {
            display: none; /* 默认隐藏 */
            color: red;
            margin-top: 5px;
        }

        .error-message img {
            vertical-align: middle;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <form id="myForm">
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username">
            <div class="error-message" id="usernameError">
                <img src="error-icon.png" alt="错误图标">
                <span>用户名不能为空</span>
            </div>
        </div>
        <button type="submit">提交</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单提交

            var username = document.getElementById('username').value;
            var usernameError = document.getElementById('usernameError');

            if (username.trim() === '') {
                usernameError.style.display = 'block'; // 显示错误提示
            } else {
                usernameError.style.display = 'none'; // 隐藏错误提示
                // 这里可以继续处理表单提交逻辑
                alert('表单提交成功！');
            }
        });

        document.getElementById('username').addEventListener('blur', function() {
            var username = this.value;
            var usernameError = document.getElementById('usernameError');

            if (username.trim() === '') {
                usernameError.style.display = 'block';
            } else {
                usernameError.style.display = 'none';
            }
        });
    </script>
</body>
</html>

6. 进一步优化

多字段校验：可以为多个输入框添加类似的校验逻辑。
动态错误信息：可以根据不同的错误类型动态更改错误信息。
样式优化：可以根据需要进一步优化错误提示的样式，使其更加美观。

通过以上步骤，你可以在表单校验时显示带图片的错误提示，提升用户体验。

上一篇：如何通过HTML按钮实现一键登录外部网站？

下一篇：Flutter如何实现与JavaScript相同的AES加密功能？