HTML表单pattern属性校验开头字符需用^锚定，如pattern="^A.*"；但存在Safari兼容问题、不阻止输入、不触发软键盘等限制，复杂场景应结合JS的test()或startsWith()实时校验。
HTML 表单里不能直接用正则校验「开头字符」
HTML 原生 pattern 属性支持正则，但它只在提交时触发，且必须匹配整个输入值（不是子串），所以想单纯校验「以某字符开头」，得用 ^ 锚定开头，同时允许后续任意内容——否则容易误判。
常见错误是写成 pattern="A"，这只会匹配单个字母 A；或者漏掉 ^，导致中间含 A 也通过。
-
pattern="^A.*"：正确，要求以 A 开头，后面可跟任意字符（包括空） -
pattern="^AB+"：要求以 AB 开头，后面至少一个 B -
pattern="^[a-z].*"：小写字母开头，注意大小写敏感
input 的 pattern 属性对「开头校验」的兼容性限制
Chrome、Firefox、Edge 支持 pattern，但 Safari 在 iOS 15.4 之前对 ^ 和 $ 的行为不一致，有时会忽略锚点。如果必须兼容老 Safari，建议补 JS 校验。
另外：pattern 不会阻止用户输入，只在 checkValidity() 或表单提交时生效；它也不校验实时输入，所以无法替代 input 事件监听。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 移动端软键盘不会因
pattern自动切换（比如想限制数字开头，pattern="^[0-9]"不会弹出数字键盘） -
title属性要配套写，否则校验失败时提示为空白或浏览器默认文本 - 空字符串默认通过
pattern校验，除非加required
JavaScript 中用 test() 校验开头字符更可靠
如果需要实时反馈、兼容旧浏览器，或逻辑稍复杂（比如「以 A 或 B 开头，且长度 ≥3」），直接用 JS 更可控。
const input = document.querySelector('input');
input.addEventListener('input', () => {
const isValid = /^A/.test(input.value); // 只看开头是不是 A
input.setCustomValidity(isValid ? '' : '必须以 A 开头');
});
注意：^A 在 JS 中无需转义，但若从字符串拼接正则（如 new RegExp('^' + prefix)），需手动转义特殊字符。
- 用
String.prototype.startsWith()更简洁，但不支持正则（比如「以 A 或 B 开头」就得写str.startsWith('A') || str.startsWith('B')） -
test()比match()轻量，只返回布尔值，适合校验场景 - 别在
input事件里频繁调用耗性能的正则（比如带.*回溯的长模式），简单开头判断无压力
容易被忽略的边界情况
开头字符校验最常翻车的地方不在正则本身，而在值的「真实开头」：
- 用户粘贴内容可能带不可见 Unicode 字符（如零宽空格
\u200B），^A会失败——必要时先.trimStart()或清理控制字符 - 中文输入法下，未上屏的拼音不算输入值，但有些浏览器会在 composition 期间触发 input 事件，导致临时值干扰校验
-
pattern对type="number"无效，数字输入框会自动过滤非数字，根本传不进字母开头的值
真正要稳，就别只靠 HTML 层；开头校验看着简单，一到真实用户手里，空格、粘贴、输入法、剪贴板，哪个都可能绕过你的 ^。
