如何在 JavaScript 中实现文本框校验，并在输入错误时在输入框下方显示带图片的错误信息？
实现这种文本框校验效果的 JavaScript 代码如下：
function validateInput(input) { // 获取输入框的值 const value = input.value; // 根据规则校验输入内容是否为空 if (!value) { // 显示错误信息 const errorMessage = document.createElement("p"); errorMessage.className = "error-message"; // 这里可以自定义错误信息样式 errorMessage.innerHTML = '<img src="error-icon.png" alt="如何用 JavaScript 实现带图片错误信息的文本框校验？" > 输入不能为空'; // 可以自定义错误信息文本和图片路径 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); }); });
登录后复制
使用这个代码，当文本框为空时，它将在输入框下方显示带有错误图标的错误信息。输入内容符合规则后，错误信息将自动消失。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
【小浪云服务商 - 服务器12元起 - 挂机宝5元起】
THE END
暂无评论内容