<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>千分位</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.min.js"></script>
</head>
<body>
<div id="app">
<el-input v-model.trim="form.pastAdjustFee" @focus="focus($event,'pastAdjustFee')" @blur="inputMoney($event,'pastAdjustFee')"></el-input>
</div>
<script>
const MoneyTest = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/
// 金额添加千分位
const comdify = function (n) {
if (!n) return n
let str = n.split('.')
let re = /\d{1,3}(?=(\d{3})+$)/g
let n1 = str[0].replace(re, '$&,')
return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}.00`
}
//去除千分位中的‘,’
const delcommafy = function (num) {
if (!num) return num
num = num.toString()
num = num.replace(/,/gi, '')
return num
}
const valdateFn = function (rule, val, cb) {
setTimeout(() => {
if (val) {
let inputVal = delcommafy(val)
if (rule.test(inputVal)) {
cb()
} else {
cb('只能是数字金额,最多两位小数')
}
}
cb()
})
}
// 验证金额数字可以为负数
const moneyValid = function (rule, val, cb) {
valdateFn(/((^-?[1-9]\d*)|^-?0)(\.\d{0,2}){0,1}$/, val, cb)
}
// 验证金额数字不可以为负数
const moneyNValid = function (rule, val, cb) {
valdateFn(MoneyTest, val, cb)
}
// 获取输入框的值
const getInputValue = function (el) {
let inputVal = el.target.value || ''
return comdify(delcommafy(inputVal))
}
const lx = new Vue({
el: '#app',
data() {
return {
form: {
pastAdjustFee: '',
},
}
},
watch: {},
computed: {},
methods: {
focus(el, name) {
this.form[name] = ''
},
inputMoney(el, name) {
this.form[name] = getInputValue(el)
},
},
created() {},
})
</script>
<style>
.inline {
display: flex;
}
</style>
</body>
</html>
element input 输入数字转换成千分位
最新推荐文章于 2024-08-06 17:22:08 发布