<form id="demo">
<label for="contact">通知邮箱（必填）</label>
<input id="contact" name="email" type="email"
       required aria-describedby="mail-help feedback">
<p id="mail-help">用于接收场次通知，例如 mei@example.com。</p>
<p>
  <button type="button" data-value="">留空</button>
  <button type="button" data-value="mei">填入 mei</button>
  <button type="button" data-value="mei@example.com">填入邮箱示例</button>
</p>
<label for="mode">提示方式</label>
<select id="mode">
  <option value="vague">笼统提示</option>
  <option value="specific">具体提示</option>
</select>
<button type="button" id="check">检查填写</button>
<p id="feedback" role="status"></p>
</form>
<script>
const form = document.querySelector('#demo');
const mail = document.querySelector('#contact');
const mode = document.querySelector('#mode');
const feedback = document.querySelector('#feedback');
function clearFeedback() {
  feedback.textContent = '';
  mail.removeAttribute('aria-invalid');
}
form.addEventListener('submit', event => event.preventDefault());
mail.addEventListener('input', clearFeedback);
mode.addEventListener('change', clearFeedback);
form.querySelectorAll('[data-value]').forEach(button => {
  button.addEventListener('click', () => {
    mail.value = button.dataset.value;
    clearFeedback();
  });
});
document.querySelector('#check').addEventListener('click', () => {
  const valid = mail.checkValidity();
  mail.setAttribute('aria-invalid', String(!valid));
  if (valid) {
    feedback.textContent = '格式检查通过；尚未提交，未核实邮箱是否存在。';
  } else {
    feedback.textContent = mode.value === 'vague' ? '输入错误。'
      : mail.validity.valueMissing ? '通知邮箱未填写，请输入接收通知的邮箱。'
      : '通知邮箱格式不正确，请填写完整地址，例如 mei@example.com。';
    mail.focus();
  }
});
</script>

先填入 mei，分别选择两种提示方式并点击“检查填写”：哪一种能帮助用户定位和修正问题？再改为邮箱示例，观察提示是否仍准确区分“格式通过”和“提交成功”。