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,'')" >

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

<input type="text" class="input-text" value="" οnkeyup="value=value.replace(/[\u4E00-\u9FA5]|[A-Za-z]/g,'')" >
 

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

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

elementUI中input输入框,强制输入数字,切数字范围为50-99

data(){

return {

   compressionValue:"", 
}

}

<el-input
          v-model.number="compressionValue"
          min="50"
          max="99"
          :maxlength="2"
          @blur="handleblurInput"
          oninput="value=value.replace(/[^0-9]/g,'')"
          placeholder="pdf压缩比例50-99 数值越低压缩比越大"
></el-input>



handleblurInput() {
      // 使用正则表达式来校验是否为正整数并且在50到100之间
      const regex = /^5[0-9]$|^6[0-9]$|^7[0-9]$|^8[0-9]$|^9[0-9]$/;
      console.log(this.compressionValue,'bb')
      if (regex.test(this.compressionValue)) {
        this.compressionValue = this.compressionValue;
      } else {
        this.compressionValue = "";
        this.$alertUniversal("请输入50-99的数值!");
        return false;
      }
    },

实现输入框只能输入正整数，输入同时禁止了以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);
        }
      }
    },

实现功能

1.必须为数字

 2.只能有一个小数点

3.小数点后保留两位小数

4.当第一位输入小数点的时候自动补全，补为 0.

5.除非是小数，否则数字不能以0开头

html:
<el-input v-model="dialogFromDate.requiredDuration" @input="requiredDurationEvent($event)" placeholder="名字"></el-input>

js:
 requiredDurationEvent(value){
            let dat =
            ("" + value) // 第一步：转成字符串
            .replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉
            .replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
            .replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
            .match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数
            // 限制输入最大值为100
            // if (Number(dat) >= 100) {
            //         return;
            // }
            this.dialogFromDate.requiredDuration=dat;
},