校验金额 只输入数字和一个小数点 保留两位小数

本文介绍了一个用于校验金额输入的JavaScript函数,确保只输入数字和小数点,限制了小数点的数量,并处理了前导零的问题。

//校验金额

export function validatePrice(num) {

//只能输入数字和小数点

num = num.replace(/[^\d.]|^\.$/g, '')

let str = num

let len1 = str.substr(0, 1)

let len2 = str.substr(1, 1)

//如果第一位是0,第二位不是点,就用数字把点替换掉

if (str.length > 1 && len1 == 0 && len2 != '.') {

str = str.substr(1, 1)

}

//第一位不能是.

if (len1 == '.') {

str = ''

}

//限制只能输入一个小数点

if (str.indexOf('.') != -1) {

let str_ = str.substr(str.indexOf('.') + 1)

if (str_.indexOf('.') != -1) {

str = str.substr(0, str.indexOf('.') + str_.indexOf('.') + 1)

}

}

return str

}

在实现金额输入校验时,需要同时满足两个条件:限制小数点后最多两位,并且对金额的位数(整数部分)进行限制。以下是几种实现方式,适用于 Vue 项目中基于 `el-form` 的表单验证。 ### 使用自定义校验规则 可以使用正则表达式结合逻辑判断来实现金额校验。以下是一个完整的示例: ```javascript var isPriceValidator = (rule, value, callback) => { // 正则匹配最多两位小数 const pattern = /^\d+(\.\d{1,2})?$/; // 判断数值是否过大(例如超过 9999999) if (value > 9999999) { return callback(new Error('金额不能超过 9999999')); } // 校验小数点后是否超过两位 if (!pattern.test(value)) { return callback(new Error('小数点后最多只能输入两位')); } return callback(); }; // 表单规则 rules: { amount: [ { required: true, message: '请输入金额', trigger: 'blur' }, { validator: isPriceValidator, trigger: 'blur' } ] } ``` ### 输入框自动格式化处理 为了提升用户体验,可以在用户输入时自动清理无效字符并保留两位小数。可以通过 `@input` 事件或 `oninput` 实现: ```html <el-input v-model="form.amount" @input="(value) => formatAmount(value)" placeholder="请输入金额" /> ``` ```javascript methods: { formatAmount(value) { // 移除非数字小数点字符 let formatted = value.replace(/[^0-9.]/g, ''); // 分割整数小数部分 const parts = formatted.split('.'); // 限制整数部分最多 7 位 if (parts[0].length > 7) { parts[0] = parts[0].substring(0, 7); } // 限制小数部分最多 2 位 if (parts.length > 1) { parts[1] = parts[1].substring(0, 2); formatted = parts[0] + '.' + parts[1]; } else { formatted = parts[0]; } this.form.amount = formatted; } } ``` ### 结合 HTML5 原生属性 对于简单的场景,可以直接使用 `<input type="number">` 并设置 `step` 属性来限制小数精度: ```html <input type="number" step="0.01" min="0" max="9999999" /> ``` 此方法虽然简单,但无法完全替代复杂的表单校验逻辑,建议配合 JavaScript 校验使用。 ### 总结与推荐 - **精确控制**:推荐使用自定义校验函数配合正则表达式,能更灵活地处理各种边界情况。 - **用户体验优化**:通过 `@input` 或 `oninput` 自动格式化输入内容,减少用户错误。 - **原生支持**:对于轻量级需求,可使用 HTML5 的 `type="number"` `step` 属性简化开发流程。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值