如何用 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 在文本框校验失败时，在输入框下方显示带有图片的错误信息？的详细内容，更多请关注www.sxiaw.com其它相关文章！