vant的form表单校验当出现保存和提交两个按钮如何校验

2023-01-13  本文已影响0人  jesse28

<van-form ref="form1" @submit="onSubmit">
 <!-- 稽查来源-字典- -->
        <van-field readonly clickable placeholder="请选择" v-model="form.fromName" name="fromName" label="稽查来源:" @click="caseFromCodeShow = true" required :rules="[{ required: true, message: '请选择' }]" />
        <van-popup round v-model="caseFromCodeShow" position="bottom">
         <van-picker value-key="label" show-toolbar :columns="caseFromColumns" @confirm="caseFromonConfirm" @cancel="caseFromCodeShow = false" />
        </van-popup>
  <div class="btn-box">
          <van-button round block type="primary" native-type="button" @click="handleSave">保存</van-button>
          <van-button style="margin-left:10px" round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
image.png

可以看到vant官网有这个一句话,所以我们把保存的按钮设置为native-type="button",然后写自己的点击事件@click

    handleSave() {
      this.$refs.form1
        .validate(['fromName', 'itemName', 'auditTime', 'auditObjectName', 'livePhoto', 'auditAddress'])
        .then(res => {
          let params = Object.assign(this.form, { auditTime: moment(this.form.auditTime).unix() *1000 })
          addAuditMainApi(params).then(res => {
            console.log('保存',res)
            if(res.data){
              this.$toast("保存成功");
              this.$router.push({ path: "/auditList" });
            }
          })
        })
    },

我们可以看到validate里面放着数组,这里指的就是稽查来源里面有个属性name,这里面就是写着name的属性值。

    // 提交
    onSubmit() {
      exeDealApi({
        sourceId: this.$route.query.sourceId,
        dealWay: this.form.dealWay,
        dealReason: this.form.dealReason,
        isRelatedCase: 1,
        dealFiles: JSON.stringify(this.fileList),
      }).then((res) => {
        this.$toast("提交成功");
        this.$router.push({ path: "/caseModule/caseFrom" });
      });
    },
上一篇 下一篇

猜你喜欢

热点阅读