input框内数字金额的相关正则表达式

原创已于 2023-03-16 16:35:14 修改 · 2.7k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #elementui #前端

于 2023-02-07 14:07:52 首次发布

在测试时候提出输入的金额数有些需要保留两位小数，保留一位小数或者输入纯数字等要求做一个基本的记录在 Input 值改变时触发 oninput

一：限制只能输入数字和小数点

 <el-input
            :disabled="ifView"
            maxlength="10"
            oninput="value=value.replace(/[^\d]/g, ""); // 清除"数字"以外的字符 
            placeholder="请输入充值金额"
            v-model="formData.recharge_amount"
          >

 <el-input
            :disabled="ifView"
            maxlength="10"
            oninput="value=value.replace(/[^\d.]/g, ""); ; //只能输入数字和小数点类型
            placeholder="请输入充值金额"
            v-model="formData.recharge_amount"
          >

二：限制小数点输入个数，只能输入一个小数点（基本用不到使用第三类，保留几位小数这种需求较多）

 <el-input
            :disabled="ifView"
            maxlength="10"
            oninput="value=value
                      .replace(".", "$#$")
	                  .replace(/\./g, "")
	                  .replace("$#$", "."); 
                    // 只保留第一个".", 清除多余的"." //只能输入数字和小数点类型
            placeholder="请输入充值金额"
            v-model="formData.recharge_amount"
          >

三：保留小数点后几位

只能输入一位小数

 <el-input
            :disabled="ifView"
            maxlength="10"
            oninput="value=value.replace(
	            /^(-)*(\d+)\.(\d).*$/,
	                "$1$2.$3"
                ); // 只能输入一位小数
            placeholder="请输入充值金额"
            v-model="formData.recharge_amount"
          >

只能输入两位小数

 <el-input
            :disabled="ifView"
            maxlength="10"
            oninput="value=value.replace(
	            /^(-)*(\d+)\.(\d\d).*$/,
	                "$1$2.$3"
                ); // 只能输入2位小数
            placeholder="请输入充值金额"
            v-model="formData.recharge_amount"
          >

只能输入三位小数

 <el-input
            :disabled="ifView"
            maxlength="10"
            oninput="value=value.replace(
	            /^(-)*(\d+)\.(\d\d\d).*$/,
	                "$1$2.$3"
                ); // 只能输3位小数
            placeholder="请输入充值金额"
            v-model="formData.recharge_amount"
          >

四：当没有小数点时候，不能输入01，02，03，001这类数字

if (
	this.inputValue &&
	this.inputValue.indexOf(".") < 0 &&
	this.inputValue != ""
) {
	this.inputValue = parseFloat(this.inputValue);
	this.inputValue = this.inputValue + ""; // 变回为字符串
} // 如果没有小数点，首位不能为类似于 01、02的值

从位置0开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换成数字。
不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的， parseFloat
()方法会把这个小数点之前的字符串转换成数字。这意味着字符串 "22.34.5 "将被解析成22.34。

parseFloat("1234blue");//return 1234.0
parseFloat("22.34.5");//return 22.34
parseFloat("0908");//return 908
parseFloat("blue");//return NaN

五：小数点后全是0则清空小数点后面的0

	// 输入过程中，只能输入六位小数且六位小数都为零，则清空小数点和后面的六个零（如果输入完成了只输入四个零，则在blur事件中处理）
if (
	this.inputValue.indexOf(".") > 0 &&
	this.inputValue.length - this.inputValue.indexOf(".") > 6
) {
	let str = this.inputValue.slice(
		this.inputValue.indexOf("."),
		this.inputValue.length
	);
	if (str / 1 <= 0) {
		this.inputValue = this.inputValue.replace(str, "");
	}
}

------------------------------------------------------------------------------------------

实际使用的部分代码

   <el-input
            :disabled="ifView"
            maxlength="10"
            oninput="inputEnter"
            placeholder="请输入充值金额"
            v-model="formData.recharge_amount"
          >
          </el-input>

inputEnter() {
	this.inputValue = this.inputValue.replace(/[^\d.]/g, ""); // 清除"数字"和"."以外的字符 只能输入数字和小数点
	this.inputValue = this.inputValue.replace(/\.{2,}/g, "."); // 不能连续输入两个及以上小数点
	this.inputValue = this.inputValue
		.replace(".", "$#$")
		.replace(/\./g, "")
		.replace("$#$", "."); // 只保留第一个".", 清除多余的"."
	this.inputValue = this.inputValue.replace(
		/^(-)*(\d+)\.(\d\d\d\d\d\d).*$/,
		"$1$2.$3"
	); // 只能输入六位小数
	if (
		this.inputValue &&
		this.inputValue.indexOf(".") < 0 &&
		this.inputValue != ""
	) {
		this.inputValue = parseFloat(this.inputValue);
		this.inputValue = this.inputValue + "";
	} // 如果没有小数点，首位不能为类似于 01、02的值
	// 输入过程中，只能输入六位小数且六位小数都为零，则清空小数点和后面的六个零（如果输入完成了只输入四个零，则在blur事件中处理）
	if (
		this.inputValue.indexOf(".") > 0 &&
		this.inputValue.length - this.inputValue.indexOf(".") > 6
	) {
		let str = this.inputValue.slice(
			this.inputValue.indexOf("."),
			this.inputValue.length
		);
		if (str / 1 <= 0) {
			this.inputValue = this.inputValue.replace(str, "");
		}
	}
	if (this.inputValue / 1 > 256) {
		this.inputValue = this.inputValue + "";
		this.inputValue = this.inputValue.slice(0, this.inputValue.length - 1);
	}
},

 // 校验金额
    checkInput() {
      this.reqData.money = this.dealInputVal(this.reqData.money)
    },
    dealInputVal(value) {
       value = value.replace(/^0*(0\.|[1-9])/, '$1')
       value = value.replace(/[^\d.]/g, '')
       value = value.replace(/^\./g, '')
       value = value.replace(/\.{2,}/g, '.')
       value = value.replace('.', '$#$')
       value = value.replace(/\./g, '')
       value = value.replace('$#$', '.')
       value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
      value =
        value.indexOf('.') > 0
          ? value.split('.')[0].substring(0, 10) + '.' + value.split('.')[1]
          : value.substring(0, 10)
      return value
    },