vue 输入框 限定输入金额的范围并且用千分符显示，初始值有格式限制

为了避免代码的耦合，利于后期维护，尽量将功能函数分开来写。

首先是千分符转化

comdify(n) {

let re = /\d{1,3}(?=(\d{3})+$)/g;

let n1 = n.replace(/^(\d+)((\.\d+)?)$/, function (s, s1, s2) {

return s1.replace(re, "$&,") + s2;

});

return n1;

}

将千分符格式的金额数字转化成普通格式的数字

delcommafy(num){//去除千分位中的‘，’

num = num.toString();

num = num.replace(/,/gi, '');

return num;

}

input框增加@blur事件 触发格式化函数

minValue 限制输入框的最小金额 ,代表<=

maxValue 限制输入框的最大金额，代表>=

names 每个输入框传入值的名字 例如 v-model=’amount’

callback 此回调函数需要传入Boolean值，如果是true代表需要将此input框内的值，进行千分符转换，如果是false，则代表不需要进行转换 ，直接return 返回即可。

小提示：methods里边的函数，因为this的指向都是vue挂载的实例。所以避免使用箭头函数，因为箭头函数会改变this。详细请 （参照阮一峰的js标准教程）

` show_number(minValue, maxValue, names, callback){

if (names == ‘amount’) {

if (!this.items.amount || parseFloat(this.items.amount) == ‘0’) {

loadingTip.show(‘请输入要求范围的金额’, 1000)

this.items.amount = ”;

return;

}

} else {

if (!this.items[names] || parseFloat(this.items[names]) == ‘0’) {

this.items[names] = ‘0.00’;

return;

}

}

if (this.items[names] && parseFloat(this.items[names]) != ‘0’) {

if (!isNaN(parseFloat(this.delcommafy(this.items[names])))) {

let itemValue = parseFloat(this.delcommafy(this.items[names]));

console.log(this.delcommafy(this.items[names]))

if (itemValue >= minValue && itemValue <= maxValue) {

this.items[names] = Number(this.items[names]).toFixed(2);

if (callback) {

this.items[names] = this.comdify(Number(itemValue).toFixed(2));

}

} else {

loadingTip.show(‘请输入要求范围的金额’, 1000);

this.items[names] = ”;

return;

}

} else {

loadingTip.show(‘请输入正确的金额’, 1000);

this.items[names] = ”;

return;

}

}

} `

关于函数内部使用 中间值进行存储并转化，原因是：在input框输入内容后，@blur事件触发后，会对内容进行格式化，并填到相应的输入框中。注意 因为输入框内容进行改变之后，又会触发input的blur事件，此时取到的值是输入框的值（经过千分符转换的值）。在进行转换过程中，会转换成NaN.所以使用中间值itemValue 将第一次进行转换的值进行存储，利用转换这个中间值对input框进行比较。