vue2 element 中 el-input 数字框验证(8 位整数 2位小数 第一位数不能为0 第一位数不能为小数点)

第一种方式
使用正则表达式

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

第二种方式

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

猜你喜欢

转载自blog.csdn.net/zzll1216/article/details/129559828