价格校验需清洗输入（去空格、逗号、保留负号和小数点）、前端用正则/^−?\d+(.\d{1,2})?$/校验并阻止表单提交，后端必须重复校验且处理浮点精度，移动端推荐type="text"配合inputmode="decimal"。
价格输入框的正则校验为什么总匹配失败
直接用 /^\d+(\.\d{1,2})?$/ 会漏掉带千分位逗号、前导空格或负号的合法价格，比如 "1,234.56" 或 "-99.9"。浏览器原生 type="number" 又不支持千分位和负数限制，所以得自己处理字符串。
实际校验前先做清洗：去掉空格、允许开头负号、保留小数点和数字，再统一转成无逗号格式。示例逻辑：
function cleanPrice(str) {
return str.replace(/^[+\s]+/, '').replace(/[,，\s]/g, '');
}
function isValidPrice(str) {
const cleaned = cleanPrice(str);
return /^-?\d+(\.\d{1,2})?$/.test(cleaned);
}
onsubmit 里调用校验但表单仍提交了
常见错误是没在事件处理函数中显式 return false 或调用 event.preventDefault()。尤其当用 addEventListener 绑定时，return false 不起作用。
推荐写法（兼容性好）：
- 表单标签加
onsubmit="return validatePrice()"，且validatePrice函数返回false阻止提交 - 或用 JS 绑定：
form.addEventListener('submit', e => { if (!isValidPrice(input.value)) e.preventDefault(); }) - 别只靠
input.onblur校验——用户可能跳过焦点直接点提交
后端校验必须同步做，前端只是体验优化
前端校验能拦截明显错误，但绕过方式太多：禁用 JS、改 DOM、抓包重发。所以 POST 接口仍需完整校验：
- 检查是否为空、是否为数字类型、小数位是否超 2 位、是否在业务允许范围内（如 ≥0）
- 注意浮点精度问题：用
parseFloat(val).toFixed(2)存储前先转成 Number，避免字符串直接入库 - PHP 示例：
filter_var($price, FILTER_VALIDATE_FLOAT) !== false && $price >= 0
移动端键盘弹出时价格输入体验差
input type="number" 在 iOS 上会强制弹出数字键盘，但无法输入负号和小数点（部分机型），导致用户输 "-123.45" 时卡住。
折中方案：
- 保持
type="text"，用inputmode="decimal"（Android 支持好，iOS 16.4+ 支持）提示系统弹出带小数点的键盘 - 配合
pattern="[+-]?\d*\.?\d{0,2}"和title="请输入有效价格，最多两位小数"做基础提示 - 不要依赖
pattern拦截——它只在reportValidity()或提交时触发，且正则能力弱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
