iview Input限制只可输入数字和小数点后两位

4,802 阅读1分钟

话不多说,直接上代码。

<Form width="500px" ref="bondData" :rules="ruleValidate"  :model="formData">  
  <FormItem :label="退款金额:" style="" prop="amount">
    <Input
      v-model="formData.amount"
      @on-keyup="keyUp($event, 'amount',true)"
      placeholder="不可超过剩余金额"
      style="width: 300px;margin-right:20px;"
    />
  </FormItem>
</Form>
<script>
export default {
    data () {
      const validateNumber = (rule, val, callback, message) => {
        if (val !== "") {
          return callback();
        }
        return callback(new Error(message));
      };
      return {
        ruleValidate: {
              amount: [{ required: true, validator: validateNumber, message: "请输入退款金额", trigger: "blur" }],
            }
        }
    },
    mothods:{
      keyUp(e, key, money) {
        // 如果是删除为空 则不处理
          if (!this.formData[key]) {
            return (this.formData[key] = "");
          }
          // 每次抬键处理,对应金额渲染两位小数||数字
          let num = "";
          if (money) {
            num = this.formData[key].match(/^\d*(\.?\d{0,2})/g)[0];
          } else {
            num = this.formData[key].replace(/^[^\d]+$/g, "").split('.')[0];
          }
          this.formData[key] = `${num}`;
        },
    }
}
</script>

另一种方法:

<Input v-model="pageNum" @input="change" placeholder="请输入内容" />
change(val) {
    val = val.replace(/(^\s*)|(\s*$)/g, "")
    if(!val) {
        this.pageNum = "";
        return
    }
    var reg = /[^\d.]/g
    // 只能是数字和小数点,不能是其他输入
    val = val.replace(reg, "")
    // 保证第一位只能是数字,不能是点
    val = val.replace(/^\./g, "");
    // 小数只能出现1位
    val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    // 小数点后面保留2位
    val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');

    this.pageNum = val;
}