如何用 JavaScript 实现带图片错误信息的文本框校验？

发布日期： 2024-11-01 阅读量： 作者： 网络

如何在 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);
  });
});

上一篇: 使用 Python 进行网页抓取的初学者指南：最佳实践和工具

如何用 JavaScript 实现带图片错误信息的文本框校验？

随便看看