表单校验,编辑的时候不修改内容也会校验报错然后无法保存,必须进行一次修改

问题遇到的现象和发生背景

表单校验,编辑的时候不修改内容也会校验报错然后无法保存,必须进行一次修改

问题相关代码,请勿粘贴截图
 "基础概率" prop="winRate">
        <el-col :span="8">
          <el-input v-model="formData.winRate" placeholder="0">el-input>
          <div class="question">
            <i class="el-icon-question">i>
            <span>用户消费最低金额可参加活动,0则无限制span>
          div>
        el-col>
        <span>%span>
      


 winRate: [
          { required: true, message: "请输入中奖率", trigger: "blur" },
          {
            pattern: `^(([1-9]{1}\\d*)|([0]{1}))(\\.(\\d){0,4})?$`,
            message: "只能输入小数点后四位",
            trigger: "blur",
          },
        ],

 async onSubmit1() {
      // 表单校验
      this.$refs.formData.validate((valid) => {
        if (valid) {
          const { stock, winRate, ...props } = this.formData;

          let params = {
            ...props,
            winRate: parseFloat(winRate),
            stock: parseInt(stock),
          };
          if (this.isEditMode) {
            // 编辑
            // console.log(111);
            this.fetch_postprizeupdate(params, 1);
          } else {
            this.fetch_postprizesave(params, 1);
          }
        }
      });
运行结果及报错内容

img

我想要达到的结果

这么样让他编辑是不修改也不报错

你检查下,修改的时候传入的winRate是不是数字类型的,因为你这里的校验是对字符串的,当你传入的是number类型就会校验失败,然后你一修改此时组件内部会处理成字符串所以才通过了校验,虽然你提交的是字符串但是接口返回的可能是number

报错说明不符合正则表达式,你在validate之前把this.formData打印出来看值对不对