vant弹窗里边嵌套表单校验

表单基本使用

使用 van-form 标签将表单包裹住，每一个 van-field 代表一个表单项，给表单定义ref为formRef，:model代表表单绑定的对象，van-field的v-model绑定在formData中的一个字段上。

// 基础表单
<van-form ref="formRef" :model="formData" label-width="80">
	<van-field
        v-model.trim="formData.reason"
        label="原因"
        placeholder="请输入"
        required
        :rules="[{ required: true, message: '', trigger: 'onBlur' }]"
        name="reason"
	/>
</van-form>

required属性为true，表单label上会有必输标识。

:rules绑定表单校验规则，message不为空的话，会有重复的标红字体提示 。

:rules="[{ required: true, message: '请输入', trigger: 'onBlur' }]"

name属性在局部校验表单的时候会使用到

this.$refs.formRef.validate("reason").then(()=>{
	// 验证通过
	}).catch(()=>{
	//验证失败
	})

弹窗嵌套表单完整代码

confirm事件里边没办法实现表单校验失败的时候阻止弹窗关闭，所以采用在dialog的before-close方法里边操作

<template>
  <van-dialog
    v-model="dialogVisible"
    title="标题"
    show-cancel-button
    :before-close="beforeClose"
  >
    <van-form ref="formRef" :model="formData" label-width="80">
      <van-field
        v-model.trim="formData.reason"
        label="原因"
        placeholder="请输入"
        required
        :rules="[{ required: true, message: '', trigger: 'onBlur' }]"
      />
    </van-form>
  </van-dialog>
</template>
<script>
export default {
  name: "dialog",
  data() {
    return {
      dialogVisible: false, //弹窗状态
      formData: {
        reason: "", //原因
      },
    };
  },
  methods: {
    //打开弹窗方法
    openDialog() {
      Object.assign(this.formData, { reason: "" }); //表单置为默认值
      this.dialogVisible = true; //打开弹窗
      this.$nextTick(() => {
        this.$refs.formRef.resetValidation();//清除所有校验
      });
    },
    //表单校验阻止关闭弹窗
    beforeClose(action, done) {
      if (action === "confirm") {
        this.$refs.formRef
          .validate()
          .then(() => {
            if (this.formData.reason.length > 200) {
              done(false);
              return this.$toast("原因最多200个字符");
            }
            //调用接口
            //this.handleData();
            done();
          })
          .catch((error) => {
            done(false);
          });
      } else {
        done();
      }
    },
  },
};

取消关闭弹窗记得使用done(false)，不然确定按钮会有loading效果