配置pattern校验属性的input输入框为何允许提交空值？

现象原因 #

这是HTML原生表单校验的默认规则导致的，核心逻辑如下：

• 无论是type="email"自带的邮箱格式校验，还是你额外加的pattern正则校验，默认仅对非空的输入值生效：只要输入框未填任何内容，原生校验逻辑会直接跳过格式校验步骤，判定该字段校验通过。
• 若需要强制用户必须填写该邮箱字段，只需给<input>标签额外添加required属性即可，添加后空值提交会直接触发表单必填报错。

修改后的输入框代码参考：

<input
  type="email"
  id="emailAddr"
  name="emailAddr"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
  placeholder="name@domain.com"
  required
/>

补充说明：

• 同时配置required和pattern后，表单提交时会先校验字段是否为空，空值直接抛必填错误，非空才会继续校验格式是否符合规则。
• 该逻辑是W3C HTML标准明确规定的原生校验规则，所有主流浏览器均遵循该实现。

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