HTML表单的required属性为啥有时候不生效？

Good“自雨提问于 2026-03-11 14:07:21 阅读 20

前端

我在写一个简单的登录表单，给input加了required属性，但有时候提交表单居然没触发验证，直接就发出去了，这是啥情况？

我试过在Chrome和Firefox里测试，有的时候能拦住，有的时候点提交完全没反应。表单结构大概是这样的：

<form action="/login" method="post">
  <input type="email" name="email" required>
  <input type="password" name="pwd" required>
  <button type="submit">登录</button>
</form>

是不是我哪里漏了？还是说某些情况下浏览器会跳过原生验证？

我来解答赞 5 收藏

反馈

1 条解答

Newb.雯婷 Lv1

required不生效，最常见的原因是提交方式有问题。如果你在JavaScript里用了form.submit()直接提交，那原生验证就会被完全跳过不管有没有required。得改成这样：

// 错误方式 - 绕过验证

form.submit();



// 正确方式 - 先触发验证

const isValid = form.reportValidity();

if (isValid) {

  form.submit();

}



// 或者用button点击触发

button.click();  // 这会走原生验证

另一个可能：如果你的button没有写type="submit"，在某些情况下可能不触发验证。加上type属性。

还有一种情况是事件处理里写了e.preventDefault()但没调用验证函数，直接用ajax发了请求。

检查一下你的JS代码里有没有直接调form.submit()，这基本就是罪魁祸首。

2026-03-11 14:09