iview中校验input输入框只能输入两位小数

例如：我们需要对input输入框进行校验只能输入两位小数。

代码示例：

<style lang="less" scoped>
.text {
  font-family: "微软雅黑";
  font-size: 16px;
  font-weight: 700;
}
</style>

<template>
  <div>
    <Modal v-model="boxShow" footer-hide width="960">
      <Form :label-width="120" ref="form" :model="formValidate" :rules="verify">
        <p class="text">{{title}}</p>
        <Row style="margin-top:20px;">
          <Col span="8">
            <FormItem label="日期" prop="dateMoney">
              <DatePicker v-model="formValidate.dateMoney" type="date" ></DatePicker>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="理财" prop="flexibleTerm">
              <Input v-model="formValidate.flexibleTerm" type="number" clearable 
              @on-keyup="keyUp($event, 'flexibleTerm',true)"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="汇率" prop="scurrency">
              <Input v-model="formValidate.scurrency" clearable type="number" 
              @on-keyup="onKeyUp($event, 'scurrency',true)"></Input>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col :offset="18">
            <Button type="primary" ghost @click="cancel">取消</Button>
            <Button type="primary" style="margin-left:50px;" @click="confirm('form')">
            确定</Button>
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>

<script>
export default {
  data(){
    const validateNumber = (rule, val, callback, message) => {
      if (val !== "") {
        return callback();
      }
      return callback(new Error(message));
    };
    return {
      boxShow:false,
      title:"",

      formValidate:{
        dateMoney:"",
        flexibleTerm:"",
        scurrency:""
      },

      verify:{
        dateMoney:[ {required:true,type:"date",message:'必填项',trigger:'blur'} ],
        flexibleTerm:[ 
          {required:true,validator: validateNumber,message:'必填项',trigger:'blur'} 
        ],
        scurrency:[ 
          {required:true,validator: validateNumber,message:'必填项',trigger:'blur'} 
        ]
      }

    }
  },
  methods:{
    // 校验只能输入两位小数
    keyUp(e, key, money) {
      // 如果是删除为空 则不处理
      if (!this.formValidate[key]) {
        return (this.formValidate[key] = "");
      }
      // 每次抬键处理,对应金额渲染两位小数||数字
      let num = "";
      if (money) {
        num = this.formValidate[key].match(/^\d*(\.?\d{0,2})/g)[0]; 
        // match(/^-?\d*(\.?\d{0,2})/g)[0]  校验可以输入负数
      } else {
        num = this.formValidate[key].replace(/^[^\d]+$/g, "").split('.')[0];
      }
      this.formValidate[key] = `${num}`;
    },

    // 只能输入四位小数
    onKeyUp(e, key, money) {
      // 如果是删除为空 则不处理
      if (!this.formValidate[key]) {
        return (this.formValidate[key] = "");
      }
      // 每次抬键处理,对应金额渲染四位位小数||数字    /^-?\d*(\.?\d{0,2})/  这个允许输入负数
      let num = "";
      if (money) {
        num = this.formValidate[key].match(/^\d*(\.?\d{0,4})/g)[0];
      } else {
        num = this.formValidate[key].replace(/^[^\d]+$/g, "").split('.')[0];
      }
      this.formValidate[key] = `${num}`;
    },

    cancel(){
      this.boxShow = false
    },

    confirm(name){
      this.$refs[name].validate((valid)=>{
        if(valid){
          this.boxShow = false
        }else {
          this.$Message.error("数据校验不合法！")
        }
      })
    }
  }
}
</script>