el-input number box verification in vue2 element (8-digit integer, 2 decimal places, the first digit cannot be 0, the first digit cannot be a decimal point)

The first way is
to use regular expressions

	<el-input style="width:200px" oninput="value=value.replace(/[^0-9.]/g,'')" v-model="form.details[scope.$index].endCnt" clearable/>

Second way

<el-form-item class="form-width" label="含税进价" prop="costPriceTax">
          <el-input @input="oninput()" 
          clearable v-model="listArrPos.costPriceTax" 
          placeholder="请输入含税进价">
          </el-input>
 </el-form-item>
oninput () {
    
    
      // 先把非数字的都替换掉,除了数字和 .
      this.listArrPos.costPriceTax = this.listArrPos.costPriceTax.replace(/[^\d.]/g, "")
      // 保证只有出现一个 . 而没有多个 .
      this.listArrPos.costPriceTax = this.listArrPos.costPriceTax.replace(/\.{2,}/g, ".")
      // 必须保证第一个为数字而不是 .
      this.listArrPos.costPriceTax = this.listArrPos.costPriceTax.replace(/^\./g, "")
      // 第一位数不能输入0
      this.listArrPos.costPriceTax = this.listArrPos.costPriceTax.replace(/^0[0-9]*/g, '')
      // 保证 . 只出现一次,而不能出现两次以上
      this.listArrPos.costPriceTax = this.listArrPos.costPriceTax
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".")
      // 只能输入 2 位小数
      this.listArrPos.costPriceTax = this.listArrPos.costPriceTax.replace(
        /^(\\-)*(\d+)\.(\d\d).*$/,
        "$1$2.$3"
      )
      // 最多只能输入 8 位数字
      this.listArrPos.costPriceTax = this.listArrPos.costPriceTax.replace(
        /^\D*(\d{0,8}(?:\.\d{0,2})?).*$/g,
        "$1"
      )
    },

Guess you like

Origin blog.csdn.net/zzll1216/article/details/129559828