正则表达式 整数最多10位，小数最多4位（input框数字验证报错问题）

附上身份证号正则验证
/^(\d{6})(19|20)(\d{2})(0[1-9]|1[0-2])([0-2][1-9]|10|20|30|31)(\d{3})(\d|[Xx])$/

{ pattern: '^[1-9]\\d{0,9}(\\.\\d{1,4})?$|^0(\\.\\d{1,4})?$', message: '整数长度最多9位，小数点最多四位', trigger: 'blur' }

解析一下 方便我自己以后变换， 第一个1-9是整数的每一位数的大小是1-9，
第二个是数的长度0-9即长度为10， 1,4是可以输入1到4位小数为什么写两次暂时没搞明白

示例 ：
整数长度最多1位可从0开始，小数点最多四位

{ pattern: '^[0-9]\\d{0}(\\.\\d{1,4})?$|^0(\\.\\d{1,4})?$', message: '整数长度最多1位，小数点最多四位', trigger: 'blur' }

应该是对的

第二个 input框验证整数及小数，由于后端返回的是number类型，input框输入的又是字符串类型，（加了type打印出来是number类型但是我正则验证还是会报错）
解决方法 统一验证格式在验证后面加transform: (value) => String(value) ，也可以改成验证其他格式的。
ps: 我改成数字输入框 拿到的是number类型了 然后把transform: (value) => String(value)改成transform: (value) => Number(value) 正则还是会过不到验证 。

 <el-row :gutter="20">
                    <el-col :span="12" class="text-center">
                        <el-form-item label="产品生产能力(吨)" prop="capacity">
                            <el-input     v-model="form.capacity" clearable placeholder="请输入" />
                            <!-- <el-input-number  v-model="form.capacity" :controls='false' placeholder="请输入" /> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="text-center">
                        <el-form-item label="产品生产能力气体(方)" prop="capacityGas">
                            <el-input   v-model="form.capacityGas" placeholder="请输入" />
                            <!-- <el-input-number v-model="form.capacityGas" :controls='false' placeholder="请输入" /> -->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" class="text-center">
                        <el-form-item label="产品最大储量(吨)" prop="reserve">
                            <el-input v-model="form.reserve"  clearable placeholder="请输入" />
                            <!-- <el-input-number v-model="form.reserve" :controls='false' placeholder="请输入" /> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="text-center">
                        <el-form-item label="产品最大储量气体(方)" prop="reserveGas">
                            <el-input v-model="form.reserveGas" placeholder="请输入" />
                            <!-- <el-input-number v-model="form.reserveGas" :controls='false' placeholder="请输入" /> -->
                        </el-form-item>
                    </el-col>
                </el-row>

 const rules = reactive({
        capacity: [ {  pattern: '^[1-9]\\d{0,11}(\\.\\d{1,2})?$|^0(\\.\\d{1,2})?$', message: '整数最多12位小数2位', trigger: 'blur', transform: (value) => String(value)  }],
        capacityGas: [{ pattern: '^[1-9]\\d{0,11}(\\.\\d{1,2})?$|^0(\\.\\d{1,2})?$', message: '整数最多12位小数2位', trigger: 'blur', transform: (value) => String(value) }],
        reserve: [{ pattern: '^[1-9]\\d{0,11}(\\.\\d{1,2})?$|^0(\\.\\d{1,2})?$', message: '整数最多12位小数2位', trigger: 'blur', transform: (value) => String(value) }],
        reserveGas: [{ pattern: '^[1-9]\\d{0,11}(\\.\\d{1,2})?$|^0(\\.\\d{1,2})?$', message: '整数最多12位小数2位', trigger: 'blur', transform: (value) => String(value) }],
    })