移动端表单需组合使用type、inputmode、pattern和JS实时清洗：type+inputmode推合适键盘，pattern提交时校验格式，input事件拦截非法输入，后端必须二次校验。
移动端表单用原生校验限制字符格式，不能只靠 HTML 属性“一招鲜”，得组合使用 type、inputmode、pattern 和必要时的 JS 补位，才能兼顾键盘体验、语义正确和数据干净。
选对 type + inputmode，先推对的键盘
这是第一步，也是最容易被忽略的基础：
-
纯数字（如验证码、ID、页码）：用
type="text" inputmode="numeric"。它在 iOS/Android 上稳定弹出仅含 0–9 的数字键盘，不带小数点或负号，避免误输 -
带小数点的数字（如金额、评分）：用
type="text" inputmode="decimal"。注意它不支持负号，也不保证所有机型都显示小数点键，需配合 JS 清洗 -
手机号：推荐
type="tel" inputmode="numeric"，双保险——tel保语义和自动填充，inputmode强制推数字键盘 - 别用
type="number"混搭inputmode：iOS 会忽略inputmode，Chrome 行为不稳定，还可能禁粘贴、转小数点为逗号
pattern 定义格式，但只在提交时起作用
pattern 是声明式规则，浏览器只在表单提交或调用 checkValidity() 时校验，不拦截输入过程：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 正则默认隐式加
^和$，写pattern="[0-9]{4,6}"就表示“必须是 4 到 6 位纯数字”，不是“包含” - 错误提示文案不可定制，依赖浏览器语言环境；想自定义提示，得用
setCustomValidity() - 空值时，
required的提示优先级高于pattern，所以两者要搭配使用 -
pattern对type="number"无效，浏览器直接忽略——这点务必避开
input 事件实时清洗，守住最后一道防线
用户仍可粘贴 "abc123"、"1..23"、"￥88.50" 或用中文输入法打标点。原生校验拦不住，必须监听 input 事件：
- 用
replace(/[^0-9]/g, '')清除非数字（验证码/ID 场景） - 金额类用
replace(/[^0-9.]/g, '').replace(/\./g, (match, offset) => offset === 0 ? '.' : '')控制小数点个数 - 删掉前导零：
replace(/^0+(?=\d)/, '')，确保不会留下 "00123" - 别用
keydown：它捕获不到粘贴、拖拽、语音输入；input才覆盖全部变更场景
后端必须二次校验，前端限制只是体验优化
所有前端限制都可被绕过：
- 攻击者能删掉
maxlength、pattern或禁用 JS - 用 curl、Postman 直接发请求，完全跳过浏览器逻辑
- 后端收到数据后，必须重新解析、正则匹配、长度检查，并按业务规则拒绝非法值
- 尤其注意 Unicode 字符（如 emoji）、代理对（??）、全角数字等，前端显示长度 ≠ 后端 UTF-8 字节数
