Vue3中如何点击外部button进行van-form表单验证

1. html页面

1.1 代码

<van-form ref="editRef">
  <van-field
     v-model="dataForm.scaleNo"
     name="scaleNo"
     label="秤的编号"
     placeholder="请选择秤"
     readonly
     :rules="scaleRules"
     @click="chooseImmune(0)"
   >
     <template #right-icon>
       <svg class="icon" aria-hidden="true">
         <use xlink:href="#icon-xiangyou14"></use>
       </svg>
     </template>
   </van-field>
   <van-field
     v-model="dataForm.number"
     type="number"
     label="饲养数量"
     placeholder="请输入种群数量"
     :rules="numberRules"
   />
   <van-field name="sex" label="种群性别">
     <template #input>
       <van-radio-group v-model="dataForm.sex" style="display: flex">
         <van-radio name="1">混群</van-radio>
         <van-radio name="2">公群</van-radio>
         <van-radio name="3">母群</van-radio>
       </van-radio-group>
     </template>
   </van-field>
 </van-form>
 <div class="btn-wrap">
        <van-button type="primary" block round @click="handleSubmit">提交</van-button>
</div>

1.2 注意项

1. 这里的ref(editRef)一定不能和表单数据(dataForm)一致，如果相同会出现输入框失焦数据丢失以及radio单选框不显示的问题
2. rules需要单独定义规则名称，如果直接写成:rules="[required:true,message:'12121']"可能会出现错误提示includes[name] is not a function
3. vue3中button已经有了点击事件就不需要再设置@submit="onSubmit"

2. JS部分核心代码

const shedRules = [{ required: true, message: "请选择所属舍号", trigger: "onChange" }];
const scaleRules = [{ required: true, message: "请选择秤编号", trigger: "onChange" }];
const numberRules = [{ required: true, message: "请输入饲养数量", trigger: "onBlur" }];
// 表单
const dataForm = ref<IScaleSaveParam>({
  orgName: "",
  farmer: "",
  groupNo: "",
  bizDate: "",
  scaleNo: "",
  shedNo: "",
  number: undefined,
  sex: "1",
});
const scaleList = ref<IScaleItemInfoList[]>();
const shedList = ref<IShedItemInfoList[]>();
const editRef = ref()


//表单提交
const handleSubmit = () => {
  console.log(dataForm.value);
  editRef.value
    ?.validate()
    .then(() => {
      console.log("验证成功");
    })
    .catch(() => {
      console.log(2222);
    });
};