在HTML表单验证中，pattern属性用于通过正则表达式约束输入框的格式，required属性用于强制用户必须填写内容。将两者结合使用，是最常见的原生前端校验方案。不过如果不清楚它们的协作机制，很容易写出看似正确却存在漏洞的表单代码。
基础用法与生效逻辑
当input同时带有required和pattern时，浏览器会在提交时先做非空判断，再对非空值做正则匹配。两者都满足才会提交成功。
<form>
<label>手机号：
<input type="text" name="phone" required
pattern="^1[3-9]d{9}$"
title="请输入11位有效手机号">
</label>
<button type="submit">提交</button>
</form>
容易混淆的点
- 只写pattern不写required，空字符串能通过校验，因为正则默认不对空值生效。
- required只检查空值，不关心格式，格式错但非空仍会触发pattern报错。
- pattern的正则不要包裹^和$也能部分工作，但建议显式写上以避免意外匹配。
自定义错误提示
使用title属性可以在用户悬浮时给出格式建议，若想在校验失败时显示更明确的文案，可通过JavaScript调用setCustomValidity方法。
const input = document.querySelector('input[name="phone"]');
input.addEventListener('invalid', function () {
if (input.validity.valueMissing) {
input.setCustomValidity('手机号不能为空');
} else if (input.validity.patternMismatch) {
input.setCustomValidity('手机号格式应为11位数字');
} else {
input.setCustomValidity('');
}
});
使用建议
pattern与required是互补关系，不是替代关系。生产环境中仍要在后端做同样的校验，前端校验只是提升体验。
常见正则写法参考
| 场景 | pattern示例 |
|---|---|
| 邮箱 | ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$ |
| 邮编 | ^d{6}$ |
掌握HTML中pattern属性与required的结合方式，能够让你在不引入额外库的情况下完成大部分基础表单校验需求。
HTMLpattern属性form_validation修改时间：2026-07-29 16:15:17