表单select与input验证失效问题求助

一、先排查原生验证失效的核心问题 #

• 检查表单是否存在novalidate属性，这个属性会直接禁用浏览器原生验证机制，删除即可恢复。
• 确认提交按钮的type是submit，如果是type="button"，点击不会触发表单的原生验证流程，只会执行绑定的JS事件。
• 针对select组件：必须设置一个空值的默认选项（如<option value="">请选择</option>），否则浏览器会认为已有选中值，required属性不会生效。

二、启用原生验证并自定义视觉提示 #

浏览器原生验证自带基础提示，但样式较生硬，可通过CSS自定义高亮效果，让用户一眼识别未填字段：

/* 高亮未通过验证的必填字段 */
:required:invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* 自定义错误提示文本样式 */
.form-error {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

三、用JavaScript增强验证反馈（可选，更灵活） #

如果原生提示不够直观，可通过JS监听表单提交事件，手动校验并显示自定义提示：

const form = document.getElementById('target-form');
const requiredFields = form.querySelectorAll('[required]');

form.addEventListener('submit', (e) => {
  let isFormValid = true;
  // 清除之前的错误提示
  document.querySelectorAll('.form-error').forEach(el => el.remove());

  requiredFields.forEach(field => {
    if (!field.validity.valid) {
      isFormValid = false;
      // 创建并插入错误提示
      const errorEl = document.createElement('span');
      errorEl.className = 'form-error';
      // 优先使用浏览器内置验证消息，无则用自定义文本
      errorEl.textContent = field.validationMessage || '此字段为必填项，请填写';
      field.parentNode.appendChild(errorEl);
      // 聚焦到第一个错误字段
      if (document.activeElement !== field) field.focus();
    }
  });

  // 验证不通过则阻止表单提交
  if (!isFormValid) e.preventDefault();
});

四、针对email字段的额外校验 #

确保email输入框的type="email"属性正确设置，浏览器会自动校验格式，若需自定义格式提示，可结合pattern属性：

<input type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" title="请输入有效的邮箱地址">

内容的提问来源于stack exchange，提问作者Lasse Yeah