JavaScript文本框校验：如何优雅地显示错误信息及图标？-css教程-PHP中文网

JavaScript文本框校验：如何优雅地显示错误信息及图标？

碧海醫心

发布： 2025-03-09 10:06:11

原创

632人浏览过

javascript文本框校验：如何优雅地显示错误信息及图标？

本文介绍如何在JavaScript中优雅地实现文本框校验，并在输入错误时显示自定义错误信息和图标，提升用户体验。

首先，在HTML中准备一个用于显示错误信息的容器：

<div id="error-message"></div>

登录后复制

然后，使用JavaScript监听输入框的blur事件（光标离开输入框时触发）。在事件处理函数中，根据预设规则校验输入值。校验失败则在error-message容器中显示错误信息和图标。

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

查看详情

const inputField = document.getElementById('myInput');
const errorMessageContainer = document.getElementById('error-message');
const errorIcon = '@@##@@'; // 替换为你的图标路径

inputField.addEventListener('blur', () => {
  const inputValue = inputField.value;
  let isValid = true;

  //  添加你的校验逻辑，例如：
  if (inputValue.length === 0) {
    isValid = false;
  }
  // ...更多校验规则...

  if (!isValid) {
    errorMessageContainer.innerHTML = errorIcon + ' 请输入有效内容';
  } else {
    errorMessageContainer.innerHTML = '';
  }
});

登录后复制

代码首先获取输入框和错误信息容器的DOM元素。blur事件监听器会在用户离开输入框时触发校验逻辑。校验失败，则在error-message容器中显示错误图标和信息；校验成功则清除错误信息。请务必将 "error_icon.png" 替换为你实际的图标路径。你可以根据需要添加更多校验规则，例如正则表达式匹配、长度限制等。这是一个基础示例，可根据实际需求进行扩展和修改。

立即学习“Java免费学习笔记（深入）”；