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>