如何用 JavaScript 实现带有图标的文本框校验？

// 初始化检测
const input = document.getElementById("my-input");
if (input.value === "") {
  // 显示错误信息
  showErrorMessage("不能为空");
}

// 用户输入触发
input.addEventListener("blur", () => {
  // 获取输入内容
  const value = input.value;

  // 使用正则表达式进行校验
  if (!/^[a-zA-Z0-9]+$/.test(value)) {
    // 校验失败，显示错误信息
    showErrorMessage("只能输入字母或数字");
  } else {
    // 校验成功，隐藏错误信息
    hideErrorMessage();
  }
});

// 显示错误信息
function showErrorMessage(message) {
  const errorMessage = document.createElement("div");
  errorMessage.textContent = message;
  errorMessage.style.color = "red"; // 自定义错误信息样式
  errorMessage.insertBefore(
    createIcon("icon-error.png"),
    errorMessage.firstChild
  ); // 在错误信息前面插入图标
  input.parentElement.appendChild(errorMessage);
}

// 隐藏错误信息
function hideErrorMessage() {
  const errorMessage = input.parentElement.querySelector("div");
  if (errorMessage) {
    errorMessage.parentNode.removeChild(errorMessage);
  }
}

// 创建图标
function createIcon(src) {
  const icon = document.createElement("img");
  icon.setAttribute("src", src); // 自定义图标地址
  icon.style.marginRight = "5px"; // 自定义图标样式
  return icon;
}