先记住这个答案
pattern 给支持它的文本类输入设置正则约束，浏览器按整个输入值检查，而不是只要包含一个匹配片段就算通过。title 应用简短人话说明规则，例如“请输入 6 位大写字母或数字”，供用户理解；但浏览器是否把它拼进提示文案没有统一保证。需要明确反馈时，应在字段附近写说明或使用自定义错误信息。空值若没有 required，不会仅因 pattern 报错。
pattern要匹配整个输入值title用人话解释输入规则- 格式不符会出现
patternMismatch - 空值是否无效还要看
required
邀请码应先讲规则再校验
假设邀请码恰好六位，只允许大写字母和数字。正则负责机器判断，标签或帮助文本负责让用户在输入前就知道规则；title 可以补充，但不能成为唯一可见说明。
<label for="invite">邀请码</label>
<input id="invite" name="invite" type="text"
pattern="[A-Z0-9]{6}" title="请输入 6 位大写字母或数字"
aria-describedby="invite-hint" required>
<p id="invite-hint">6 位大写字母或数字</p>输入 ABC123 可通过模式，输入 abc123 会触发 patternMismatch。required 单独负责空值；去掉它之后，用户留空可通过该模式约束。
HTML 的 pattern 不需要手写首尾锚点来限定整个值。复杂正则还要注意浏览器使用的 Unicode 匹配语法，尤其字符类里的特殊字符。
提示不能只靠悬浮标题
title 在触屏、键盘和不同辅助技术中的呈现不一致。若规则很重要，把“六位大写字母或数字”放在字段附近，并用 aria-describedby 关联，用户在提交前就能看到。
当原生提示不够清楚，可在 invalid 事件或提交逻辑里读取 validity.patternMismatch，再展示自定义说明。错误被修正后应清理旧提示，避免控件一直处于无效状态。服务端仍应使用同一业务规则复核。
在控制台测试模式时不要直接把 HTML 的 pattern 值当作带斜杠的正则字面量。属性里写的是模式文本，例如 pattern="[A-Z0-9]{6}"，浏览器要求整个输入值匹配，若再写 ^ 和 $ 通常只是多余。现代浏览器按 Unicode v 模式解释，字符类里某些符号需要额外转义；从旧代码复制复杂模式后，最好在目标浏览器里同时试合法值、非法值和空值，避免“正则看起来对”却全都不通过。
容易答错的地方
- 以为
pattern匹配任意子串就算通过 - HTML 模式约束要求整个输入值满足模式；只匹配其中一段不够。
- 只写
title就以为完成无障碍提示 title不一定容易发现，也不保证作为错误文案出现。应有可见说明和明确错误反馈。
面试官还会怎么问？
pattern 能用于 type="number" 吗？
它适用于文本、搜索、电话、邮箱、URL、密码等类型；数字输入应使用范围和步进等约束。
没有 required 时留空会怎样？
空字符串通常不会触发 patternMismatch。必填和格式是两道独立约束。
如何知道具体是格式错误？
读取控件的 validity.patternMismatch，不要解析本地化的浏览器提示文字。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。