在JavaScript中，你可以通过监听输入框的事件（如input、blur等）来校验输入内容，并在输入框下方显示带图片的错误提示。以下是一个简单的实现示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本框校验</title>
<style>
.error-message {
color: red;
display: none;
margin-top: 5px;
}
.error-message img {
vertical-align: middle;
margin-right: 5px;
}
</style>
</head>
<body>
<form id="myForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
<div id="usernameError" class="error-message">
<img src="error-icon.png" alt="错误图标"> 用户名不能为空
</div>
<button type="submit">提交</button>
</form>
<script src="script.js"></script>
</body>
</html>
document.getElementById('username').addEventListener('blur', function() {
var username = this.value.trim();
var errorMessage = document.getElementById('usernameError');
if (username === '') {
errorMessage.style.display = 'block';
} else {
errorMessage.style.display = 'none';
}
});
document.getElementById('myForm').addEventListener('submit', function(event) {
var username = document.getElementById('username').value.trim();
var errorMessage = document.getElementById('usernameError');
if (username === '') {
errorMessage.style.display = 'block';
event.preventDefault(); // 阻止表单提交
} else {
errorMessage.style.display = 'none';
}
});
HTML 结构：
<input>) 用于用户输入用户名。<div id="usernameError">) 包含一个错误图标和错误信息，初始状态为隐藏 (display: none)。CSS 样式：
.error-message 类用于控制错误提示的样式，包括颜色、显示状态等。img 标签用于显示错误图标，并通过 vertical-align: middle 使其与文本垂直对齐。JavaScript 逻辑：
blur 事件，当用户离开输入框时，检查输入内容是否为空。如果为空，显示错误提示。submit 事件，在表单提交时再次检查输入内容。如果为空，阻止表单提交并显示错误提示。通过这种方式，你可以在用户输入错误时，动态显示带图片的错误提示，提升用户体验。