如何用 JavaScript 在文本框校验失败时，在输入框下方显示带有图片的错误信息？

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《如何用 JavaScript 在文本框校验失败时，在输入框下方显示带有图片的错误信息？》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

如何使用 js 实现文本框校验并显示错误信息

问题：如何在文本框校验时，错误信息显示在输入框下方，并且在错误信息前面添加图片？

答案：

使用 javascript 实现此功能非常简单。

首先，初始化时检测内容是否为空。如果为空，则提示错误信息。然后，当用户输入内容后，可以使用 onblur 事件。当光标离开输入框时，触发校验函数。在校验函数中，取得输入框的值，并使用正则表达式或其他规则进行校验。

校验成功时，可以移除错误信息。如果校验失败，则显示错误信息，并可以使用标签在错误信息前面添加图片。

具体代码示例：

const input = document.getElementById('input');

input.addEventListener('blur', (e) => {
  const value = e.target.value;

  if (value === '') {
    showError('输入内容不能为空');
    return;
  }

  // 校验规则
  const regex = /\w+/;

  if (!regex.test(value)) {
    showError('输入内容不合法');
    return;
  }

  // 校验成功，移除错误信息
  hideError();
});

const showError = (message) => {
  const errorContainer = document.createElement('div');
  errorContainer.classList.add('error-container');

  const errorImage = document.createElement('img');
  errorImage.src = 'error.png';

  const errorMessage = document.createElement('span');
  errorMessage.textContent = message;

  errorContainer.appendChild(errorImage);
  errorContainer.appendChild(errorMessage);

  input.parentElement.appendChild(errorContainer);
};

const hideError = () => {
  const errorContainer = document.querySelector('.error-container');

  if (errorContainer !== null) {
    errorContainer.parentElement.removeChild(errorContainer);
  }
};

今天关于《如何用 JavaScript 在文本框校验失败时，在输入框下方显示带有图片的错误信息？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！