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

如何巧用 javascript 实现带有图标报错提醒的文本框校验

对于有文本框校验需求的开发者来说，如何优雅地处理错误信息显示往往是一个难题。本文将介绍一种使用 JavaScript 实现文本框校验的有效方法，让错误信息清晰可见，并在错误信息前添加自定义图标。

方案解析

要实现图中所示的效果，可以使用 JavaScript 脚本：

1. 初始化检测：页面加载时，检查文本框内容是否为空。如果为空，则显示错误信息。
2. 用户输入触发：当用户输入内容时，可以使用 onBlur 事件。当光标离开文本框时，触发校验函数。
3. 校验函数：校验函数获取文本框的 val 值，使用正则表达式或其他规则进行校验。如果校验失败，则显示错误信息。

具体实现

// 初始化检测
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;
}

通过这种方式，开发者可以轻松地实现带有图标报错提醒的文本框校验功能，提升用户体验。

以上就是如何用 JavaScript 实现带有图标的文本框校验？的详细内容，更多请关注其它相关文章！