HTML5中可用pattern属性配合正则实现客户端输入验证：支持邮箱、手机号、6位数字验证码、强密码等格式校验，需结合title提示、type类型及novalidate自定义控制。
如果您在HTML5表单中需要对用户输入内容进行格式限制，例如邮箱、手机号、密码强度等，可以使用pattern属性配合正则表达式实现客户端即时验证。以下是具体应用方式：
一、基础语法与触发条件
pattern属性必须作用于元素，且仅对type为text、search、url、tel、email、password等文本类输入类型生效。浏览器会在表单提交时自动校验输入值是否匹配指定正则，不匹配则阻止提交并显示默认提示。
1、在标签中添加pattern属性，值为不带斜杠的正则表达式字符串（如pattern="[0-9]{6}"）。
2、建议同时添加title属性，用于自定义不匹配时的提示文字，否则浏览器将显示“请与所要求的格式匹配”等默认文案。
立即学习“前端免费学习笔记（深入）”；
3、正则默认为**全匹配模式**，即整个输入值必须完全符合表达式，无需显式添加^和$锚点（但显式添加亦可）。
二、验证6位数字验证码
该方法适用于短信验证码、支付口令等固定长度纯数字场景，通过字符集限定和长度控制确保输入合规。
1、设置input的type为text或tel（避免移动端数字键盘误触符号）。
2、添加pattern="[0-9]{6}"，限定仅允许6个ASCII数字字符。
3、添加title="请输入6位数字验证码"，使错误提示更明确。
4、示例代码：。
三、验证标准邮箱格式
利用正则约束邮箱的本地部分、@符号及域名结构，兼顾常见合法邮箱写法，同时排除明显非法组合。
1、采用较宽松但实用的邮箱正则：pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"。
2、注意：此正则区分大小写，需配合input的lowercase或CSS text-transform: lowercase确保一致性。
3、添加title="请输入有效的邮箱地址"提升用户体验。
4、示例代码：。
四、验证11位中国大陆手机号
针对手机号前缀特征（13–19开头，第二位非0/1/2，共11位），排除虚拟号段和非法组合，提高有效性。
1、使用正则pattern="1[3-9]\d{9}"，其中1[3-9]匹配13–19开头，\d{9}匹配后续9位数字。
2、该正则不校验运营商号段有效性，仅作基础位数与起始数字控制。
3、添加title="请输入11位中国大陆手机号"明确输入要求。
4、示例代码：。
五、验证至少8位含大小写字母与数字的密码
通过正则的多组正向先行断言（lookahead）确保密码包含多种字符类型，增强安全性。
1、使用正则pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}"，分别要求至少1个小写字母、1个大写字母、1个数字，且总长≥8。
2、注意：HTML5原生pattern不支持(?!等负向断言，且部分旧版浏览器可能不完全支持先行断言，需实测兼容性。
3、添加title="密码需包含大小写字母和数字，至少8位"说明规则。
4、示例代码：。
六、禁用浏览器默认验证并自定义反馈
当需要覆盖浏览器原生提示样式或集成到JS验证流程中时，可通过novalidate禁用表单级验证，并手动调用checkValidity()和setCustomValidity()。
1、在标签添加novalidate属性，关闭自动验证拦截。
2、为input绑定input事件，在每次输入后调用element.checkValidity()检测状态。
3、若验证失败，调用element.setCustomValidity("自定义错误信息")；成功时调用element.setCustomValidity("")清空错误。
4、关键提示：setCustomValidity("")必须在验证通过时显式调用，否则后续submit仍会因残留错误而失败。
