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

作者: jesse28 | 来源:发表于2023-01-13 10:15 被阅读0次

记录个问题
CSS文本超出希望右对齐
bootstrap直接对form表进行校验
form表单内子元素组件按钮button事件冲突 - Vue
layui表单校验失效
drf 取消csrf token校验
Element、iview 表单校验总结
laravel中csrf验证详解
flutter 表单Form使用示例
React+Ts+Antd实现Modal弹框中控制多个Tab页的


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