HTML表单错误提示怎么显示_HTML表单验证失败时的错误信息提示方法

<input type="email" name="email" required placeholder="请输入邮箱">

<div>
  <input type="text" id="username" placeholder="用户名">
  <span id="username-error" style="color:red;display:none;">用户名不能为空</span>
</div>

<script>
document.getElementById('username').addEventListener('blur', function() {
  const value = this.value.trim();
  const errorSpan = document.getElementById('username-error');
  if (value === '') {
    errorSpan.style.display = 'inline';
  } else {
    error7Span.style.display = 'none';
  }
});
</script>

<div id="error-messages" style="color:red;"></div>
<form id="myForm">
  <input type="text" name="name" required>
  <input type="email" name="email" required>
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
  const errors = [];
  const name = this.name.value.trim();
  const email = this.email.value.trim();

  if (!name) errors.push('姓名不能为空');
  if (!email) errors.push('邮箱不能为空');

  const errorBox = document.getElementById('error-messages');
  if (errors.length > 0) {
    e.preventDefault(); // 阻止提交
    errorBox.innerHTML = '<strong>请修正以下错误：</strong><ul>' + 
      errors.map(err => `<li>${err}</li>`).join('') + '</ul>';
  } else {
    errorBox.innerHTML = '';
  }
});
</script>

input.error {
  border: 1px solid red;
  background-color: #ffefef;
}