input输入框只能输入金额，当输入整数时并且自动填充后两位小数

小蜜蜂dyh

已于 2022-07-25 17:08:58 修改

阅读量2.7k

点赞数

分类专栏：前端代码块文章标签： vue 前端

于 2022-07-25 17:07:58 首次发布

本文链接：https://blog.csdn.net/qq_38897823/article/details/125978377

版权

前端代码块专栏收录该内容

1 篇文章 0 订阅

订阅专栏

input输入框只能输入金额，并且自动填充后两位小数

methods里面定义两个验证方法：

	validateNumberInput(e,item) {
        let value = e.target.value.replace(/[^\d.]/g,'').replace(/\.{2,}/g,'.').replace('.','$#$').replace(/\./g,'').replace('$#$','.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
        if(value >= 999999999.99) {
          this.priceListForm[item] = 999999999.99;
        }else {
          this.priceListForm[item] = value;
        }
 	},
	blurNumberInput(e,item) {
    	if(e.target.value && e.target.value.indexOf('.') <= 0) {
         	this.priceListForm[item] = e.target.value + '.00'
      	}
 	},

input标签内：

	<el-form-item label="NYMEX WTI：" prop="nymexWti">
            <el-input class="input-width" v-model="priceListForm.nymexWti" @keyup.native="validateNumberInput($event,'nymexWti')" @blur="blurNumberInput($event,'nymexWti')"></el-input>
    </el-form-item>