Vue 3金额验证需限制小数位数且确保数值合法；应使用v-model.number或手动转Number，配合@input/@blur格式化，校验规则须覆盖必填、类型、小数位、范围及NaN/Infinity等语义检查。

Vue 3 中处理价格金额的精确度验证，核心在于两点：一是限制输入值的小数位数（通常为最多两位），二是确保数值合法（非 NaN、非无穷、不为空字符串或 null）；不能只靠正则简单匹配，尤其要防范浮点数计算误差和用户粘贴异常内容。

金额字段必须用数字类型 + 格式化绑定

避免直接用 v-model 绑定字符串，推荐使用受控输入 + 数字转换：

• 输入框使用 v-model.number 或手动转 Number，防止字符串拼接导致校验失效
• 配合 @input 或 @blur 实时格式化：如输入 12.345 自动截断为 12.34，或四舍五入（按业务定）
• 显示层建议用 {{ value?.toFixed(2) || '0.00' }}，但注意 toFixed 返回字符串，提交前仍需转回 number

校验规则要覆盖「格式」和「语义」两层

Element Plus 的 rules 中，金额字段建议组合使用：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 必填 + 类型检查：{ required: true, type: 'number', message: '请输入有效金额' }
• 小数位数限制：用自定义 validator 判断 value.toString().split('.')[1]?.length <= 2
• 范围与逻辑检查：比如不能为负、不能超过预算总额、不能为 Infinity 或 NaN
• 避免仅用正则（如 /^\d+(\.\d{1,2})?$/），它无法识别 12. 或 .5 这类半合法输入

表格内多行金额校验需动态 prop 绑定

当金额在 el-table 中逐行编辑时，每项 el-form-item 的 prop 必须唯一且可追踪：

立即学习“前端免费学习笔记（深入）”；

• 写成 :prop="`items.${index}.price`"，对应表单模型结构 items: [{ price: 0 }, ...]
• 校验规则用 computed 动态生成，例如对第 i 行做独立小数位判断，或全局合计校验
• 调用 formRef.validate() 会自动遍历所有带 prop 的项，无需手动循环校验

防误操作：输入过程就拦截非法字符

单纯依赖提交校验不够，应在输入阶段过滤：

• 监听 @keydown，阻止非数字、小数点、减号（如需负数）以外的按键
• 对粘贴内容用正则清洗：.replace(/[^0-9.-]/g, '').replace(/(\..*)\./g, '$1')
• 输入后立即修正：若值为 ''、'.'、'-.' 等无效状态，设为 0 或清空