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

你可能感兴趣的:(vue2.0,前端,vue.js,javascript)