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

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

作者: jesse28 | 来源:发表于2023-01-13 10:15 被阅读0次
    
    <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" });
          });
        },
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/pidgcdtx.html