如何在 javascript 中实现文本框校验，并在输入错误时在输入框下方显示带图片的错误信息？
实现这种文本框校验效果的 JavaScript 代码如下：
function validateInput(input) {
// 获取输入框的值
const value = input.value;
// 根据规则校验输入内容是否为空
if (!value) {
// 显示错误信息
const errorMessage = document.createElement("p");
errorMessage.className = "error-message"; // 这里可以自定义错误信息样式
errorMessage.innerHTML = '@@##@@ 输入不能为空'; // 可以自定义错误信息文本和图片路径
input.after(errorMessage);
} else {
// 校验成功，移除错误信息
const errorMessage = input.nextSibling;
if (errorMessage && errorMessage.className === "error-message") {
errorMessage.remove();
}
}
}
// 初始化时检测内容是否为空
window.onload = function () {
const inputs = document.querySelectorAll("input");
inputs.forEach(input => {
validateInput(input);
});
};
// 当输入框光标离开时触发校验
inputs.forEach(input => {
input.addEventListener("blur", () => {
validateInput(input);
});
});使用这个代码，当文本框为空时，它将在输入框下方显示带有错误图标的错误信息。输入内容符合规则后，错误信息将自动消失。
以上就是如何用 JavaScript 实现带图片错误信息的文本框校验？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1009
