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

今天golang学习网给大家带来了《如何用 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"> 输入不能为空'; // 可以自定义错误信息文本和图片路径
    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 实现带图片错误信息的文本框校验？ 》的详细内容，更多关于的资料请关注golang学习网公众号！