Vue2，Vue3——Vant，Vant3自定义表单验证效果实现

<van-form @submit="onSubmit">

onSubmit(values) {
      console.log("submit", values);
    },

<van-field
        v-model="form.tel"
        type="tel"
        label="手机号码"
        :rules="telRules"
      />

native-type="submit"

this.$refs.form.validate('emailRules').then(()=>{
        console.log('成功 ！');
      }).catch(()=>{
        console.log('失败');
      })

this.$refs.form.validate().then(()=>{
        console.log('成功 ！');
      }).catch(()=>{
        console.log('失败');
      })

/* Hooks正则验证 */
export default function(){
      // 手机号
      const telRules = [
        { required: true, message: "手机号码不能为空", trigger: "onChange" },
        {
        },
      ];
      // 密码
      const psdRules = [
        { required: true, message: "密码不能为空", trigger: "onChange" },
        {
          validator: (value: any) => {
            return /^(?=.*[a-z])(?=.*\d)[^]{8,16}$/.test(value);
          },
          message: "密码必须包含数字,字母,且不少于8位",
          trigger: "onBlur",
        },
      ];
      // 姓名
      const nameRules = [
        { required: true, message: "姓名不能为空", trigger: "onChange" },
        {
          validator: (value: any) => {
            return /^[\u2E80-\u9FFF]+$/.test(value);
          },
          message: "姓名输入不合法",
          trigger: "onBlur",
        },
      ];
      // 身高
      const heightRules = [
        { required: true, message: "身高不能为空", trigger: "onChange" },
        {
          validator: (value: any) => {
            return /^(0{1}|[1-9]\d{0,3}|.{0})$/.test(value);
          },
          message: "请输入正确的身高",
          trigger: "onBlur",
        },
      ];
      const weightRules = [
        { required: true, message: "体重不能为空", trigger: "onChange" },
        {
          validator: (value: any) => {
            return /^(0(\.\d{1}){0,1}|[1-8]\d{1,3}(\.\d{1}){0,1}|9\d{1,2}(\.\d{1}){0,1}|999(\.0){0,1}|.{0})$/.test(
              value
            );
          },
          message: "请输入正确的体重",
          trigger: "onBlur",
        },
      ];
      return{
        telRules,
        psdRules,
        nameRules,
        heightRules,
        weightRules
      }
}

<van-field v-model="phone" name="phone" label="手机" type="tel" placeholder="请填写手机号码" :rules="telRules" />
import resgisterSelector from "../hooks/registerSelector"; 
setup(){
    const {
      dietitianName,
      teamDoctorName,
      therapistsName,
      coachName,
      yingyangshi,
      duiyi,
      kangfushi,
      jiaolianyuan,
    } = resgisterSelector();
    return{
      dietitianName,
      teamDoctorName,
      therapistsName,
      coachName,
      yingyangshi,
      duiyi,
      kangfushi,
      jiaolianyuan,
    }
}