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

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

登录后复制

使用这个代码，当文本框为空时，它将在输入框下方显示带有错误图标的错误信息。输入内容符合规则后，错误信息将自动消失。

以上就是如何用 JavaScript 实现带图片错误信息的文本框校验？的详细内容，更多请关注米云其它相关文章！