vue+element 正則表達式進行表單驗證

<template>  
    <el-form :model="form" label-width="115px" ref="form" :rules="rules" label-position="left">
        <el-row :gutter="20"> 
        <el-col :span="12">
            <el-form-item label="同期最大購買數" prop="pkspace_num">
            <el-input v-model="form.pkspace_num" auto-complete="off" clearable></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="價格"  prop="price" >
            <el-input v-model="form.price" auto-complete="off" clearable><template slot="append">{{price_txt}}</template></el-input>
            </el-form-item>
        </el-col>
        </el-row>
        <el-row :gutter="20">
        <el-col :span="12">
            <el-form-item label="C端最大折扣率"  prop="c_disrate">
            <el-input v-model="form.c_disrate" auto-complete="off" clearable></el-input>
            </el-form-item>
        </el-col> 
        </el-row> 
    </el-form> 
</template>

<script>
  export default {
    name: "creatRent",
    data(){ 
      let patter = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
      let isNumber = (rule, value, callback) => {
        if (!patter.test(value)) {
          return callback(new Error('必須非負整數或至多保留兩位小數'))
        } else {
          callback()
        }
      };
      let percent = /^(?:[1-9]?\d|100)$/;
      let isPercent = (rule, value, callback) => {
        if (!percent.test(value)) {
          return callback(new Error('請輸入0-100的整數'))
        } else {
          callback()
        }
      };
      let num = /^(0|\+?[1-9][0-9]*)$/;
      let isNum = (rule, value, callback) => {
        if (!num.test(value)) {
          return callback(new Error('請輸入非負整數'))
        } else {
          callback()
        }
      };
      return { 
        form: { 
          pkspace_num: '', 
          price:'', 
          c_disrate:'', 
        },
        rules: { 
          pkspace_num: [
            { required: true, message: '同期最大購買數不能為空', trigger: 'blur' },
            { min: 1, max: 5, message: '長度在 1 到 5 個字符', trigger: 'blur' },
            { validator:isNum}
          ], 
          price: [
            { required: true, message: '價格不能為空',trigger: 'blur' },
            { min: 1, max: 8, message: '長度在 1 到 8 個字符', trigger: 'blur' },
            { validator:isNumber}
          ], 
          c_disrate: [
            { required: true, message: 'C端最大折扣率不能為空', trigger: 'blur' },
            { min: 1, max: 3, message: '長度在 1 到 3 個字符', trigger: 'blur' },
            { validator:isPercent}
          ], 
        }, 

      }
    }, 


  }
</script>