应使用 type="number" 实现价格输入，配合 min="0.01"、step="0.01" 和 required 属性；pattern 对 number 类型无效；需后端校验兜底，并通过 data 属性动态控制范围，显示千分位时须分离格式化与原始值。
用 type="number" 而不是 type="text" 做价格输入
价格本质是数字，用 type="number" 能触发原生数字键盘（移动端）、支持上下箭头微调、且便于后续校验。用 type="text" + 正则拦截，既难写全（小数点、负号、千分位），又容易被绕过（如粘贴非法字符串）。
但注意：type="number" 默认允许空值和负数，价格通常不允许——必须配合 min 和 required：
<input type="number" min="0.01" step="0.01" required>
其中 step="0.01" 确保只接受两位小数（否则用户可能输 1.234 导致后端解析异常）；min="0.01" 比 min="0" 更合理，避免 0 元商品干扰业务逻辑。
input 的 pattern 和 title 对价格无效
pattern 只对 type="text" 生效，对 type="number" 完全忽略。强行加 pattern 不会报错，但也不起作用，属于伪防护。
如果坚持用 type="text"（比如要兼容老 IE），那必须用 JS 监听 input 事件实时过滤：
- 允许数字、一个点、最多两位小数（正则
^\d*\.?\d{0,2}$） - 禁止以
.开头或结尾（如.5或1.） - 禁止多个点（
1..5） - 输入后立即
input.value = value.replace(/^\.|(\.)\./g, '$1')修正
但这类逻辑极易漏 case，不如直接用 type="number" + 后端兜底来得可靠。
范围控制不能只靠前端 min/max
min 和 max 属性仅用于表单提交前的浏览器校验，用户打开开发者工具改 DOM 就能绕过。实际业务中，价格范围往往由后端动态决定（如商品类目不同，价格上限不同），前端硬编码 max="9999.99" 很容易过期或出错。
更稳妥的做法：
- 把合法范围（
min_price,max_price）从接口返回，写入data-属性：<input data-min="1.00" data-max="500.00"> - 提交前用 JS 校验：
const v = parseFloat(input.value); if (v max) { /* 提示 */ } - 后端必须重复校验——前端任何控制都只是体验优化
显示千分位但提交纯数字的常见陷阱
用户希望看到 1,234.56，但后端需要 1234.56。不要用 toLocaleString() 直接改 input.value，这会导致光标跳到末尾、无法正常编辑。
可行方案是分离显示与值：
- 用
<span></span>显示格式化后的价格（只读），旁边放隐藏<input type="hidden">存原始数字 - 或监听
blur事件：失去焦点时格式化显示，但保留原始值在dataset.rawValue中 - 务必注意：
parseFloat("1,234.56")返回1（逗号截断），必须先.replace(/,/g, '')
最易被忽略的是：国际化场景下，有些地区用空格或点作千分位，用逗号作小数点（如 1 234,56）。若需多语言支持，别自己写替换逻辑，用 Intl.NumberFormat 解析。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
