el-inut限制只能输入正整数

619 阅读1分钟

el-inut限制只能输入正整数

   <el-input
      v-model="form.number"
      type="number"
      @keydown.native="handleKeydown"
      @input="handleInputValue"
      clearable
    ></el-input>
   methods: {
      handleKeydown(e) {
          const key = e.key
          // 不能输入小数点
          if (key == '.') {
            e.returnValue = false
            return false
          }
          // 不能输入e
          if (key === 'e') {
            e.returnValue = false
            return false
          }
    },
    handleInputValue(val) {
        let value = val.replace(/[^\d]/g, '') // 只能输入数字
        value = value.replace(/(\d{4})\d*/, '$1') // 最多保留4位整数
        // 以0开头则清空,即实现了禁止第一位输入0
        if (value == 0) {
            value = ''
        }
        this.form.number = value
    },
  }

这样el-input就只能输入正整数了,开头不能输入0,不能输入小数点、e、字符和汉字。 还一种方法就是使用正则来校验。

<el-form-item
    :prop="xxx"
    :rules="[{ required: true, pattern: /^[1-9](\d*)$/, message: '请输入正整数', trigger: ['blur', 'change'] }]"
    >
    <el-input v-model="form.xxx" clearable type="number"></el-input>
</el-form-item>