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

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);
  }
};