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

Question

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

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

问题相关代码，请勿粘贴截图

 <el-form-item label="基础概率" 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>
      </el-form-item>


 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);
          }
        }
      });

运行结果及报错内容

我想要达到的结果

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

Answer 1

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