el-input金钱校验
时间: 2023-07-05 22:20:59 浏览: 100
您可以通过以下方式对el-input进行金钱校验:
1. 在el-input组件中使用v-model绑定一个数据属性,例如:`<el-input v-model="money"></el-input>`
2. 监听input事件,在事件处理函数中对输入的值进行校验,例如:
```
<el-input v-model="money" @input="handleInput"></el-input>
...
methods: {
handleInput(value) {
// 去除非数字字符,保留两位小数
const val = value.replace(/[^\d.]/g, '')
.replace(/^\./g, '')
.replace(/\.{2,}/g, '.')
.replace('.', '$#$')
.replace(/\./g, '')
.replace('$#$', '.')
.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
// 更新绑定的数据属性
this.money = val
}
}
```
3. 在提交表单或者其他需要使用金钱数值的地方,再次对数据进行验证和处理,例如:
```
methods: {
handleSubmit() {
if (this.money === '') {
// 金钱数值为空
return
}
const val = parseFloat(this.money)
if (isNaN(val) || val <= 0) {
// 金钱数值非法
return
}
// 正常提交表单或其他操作
}
}
```
以上是一种简单的金钱校验方式,您可以根据实际需求进行调整和扩展。
阅读全文