Vue input 限制输入正负数，小数点后保留两位

林中明月间。

已于 2023-07-05 16:45:24 修改

阅读量8.4k

点赞数 2

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

于 2020-09-10 10:16:55 首次发布

原文链接：https://www.jianshu.com/p/da9696b83ddb

版权

Vue.js 专栏收录该内容

194 篇文章 21 订阅

订阅专栏

Vue input 限制只能输入正整数、数字、英文、两个小数 - 简书

https://www.liangzl.com/get-article-detail-21106.html

https://www.cnblogs.com/zjxiang008/p/12159611.html

Vue限制input仅能输入正整数或浮点数指令_resplace 只能输入float数_心动止于人海。的博客-CSDN博客 Vue限制input仅能输入正整数或浮点数指令

js正则函数match、exec、test、search、使用介绍集合检验身份证_心动止于人海。的博客-CSDN博客

只允许输入数字(整数：小数点不能输入)
<input type="text" οnkeyup="value=value.replace(/[^\d]/g,'')" >
允许输入小数(两位小数)
<input type="text" οnkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" >
允许输入小数(一位小数)
<input type="text" οnkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,1})?).*$/g, '$1')" >
开头不能为0，且不能输入小数
<input type="text" οnkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" >

不能输入中文和字母例如：价格输入

elementUI中input输入框,强制输入数字,并限制输入长度

<el-input v-model="item.userScore" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
maxlength="4"
>
</el-input>

实现输入框只能输入正整数，输入同时禁止了以0开始的数字输入，防止被转化为其他进制的数值。

<input type='text' onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">

正则js判断正整数

1. 判断字符串是否是整数（可以为负数）：
let re = /^[-+]?\d*$/;

re.test('-12.3') // false
re.test('12.3') // false

re.test('-123') // true
re.test('123') // true

2. 判断字符串是否是正整数：
let re2 = /^[1-9]\d*$/;

re2.test('12') // true
re2.test('-12') // false
re2.test('0.12') // false
re2.test('-0.12') // false

只能输入正负数


<el-input
            v-model="minnum"
            style="width: 80px; height: 40px"
            @change="minnumFn"
            @input="number"
          ></el-input>
//只能输入负整数
    number(val) {
      this.minnum = this.minnum.replace(/[^\w&-]|_/gi, "");
      this.minnum = this.minnum.replace(/[\u4E00-\u9FA5]|[A-Za-z]/g, "");
      if (val >= 0) {
        this.$message({
          message: "只能输入负整数",
          type: "error",
        });

        this.minnum = "";
      }
    },

限制只能输入正整数

<input v-model="interval" type="text" @input="numberSize" placeholder="请输入">

numberSize() {
      var interval = this.interval;
      interval = interval.replace(/[^\.\d]/g, ""); // 清除“数字”以外的字符 
      interval = interval.replace(".", ""); // 清除“.”以外的字符
      if (interval.indexOf(".") < 0 && interval != "") {
        // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        interval = parseInt(interval);
      }
      this.interval = interval;
    },

<input type="text" v-model="money" @keyup="priceFormat" />

//限制
    priceFormat() {
      //修复第一个字符是小数点 的情况.
      console.log(this.money.substr(0, 1), this.money);
      if (this.money != "" && this.money.substr(0, 1) == ".") {
        this.money = "";
      }
      this.money = this.money.replace(/^0*(0\.|[1-9])/, "$1"); //解决 粘贴不生效
      this.money = this.money.replace(/[^-\d.]/g, ""); //清除“数字”和“.”以外的字符
      this.money = this.money.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
      this.money = this.money
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      this.money = this.money.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
      if (this.money.indexOf(".") < 0 && this.money != "") {
        //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        if (this.money.substr(0, 1) == "0" && this.money.length == 2) {
          this.money = this.money.substr(1, this.money.length);
        }
      }
    },