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

官网上面有正则函数异步三种验证效果，但是并没有详细说明多个表单验证该如何实现，这里提一下

首先要有form标签

 <van-form @submit="onSubmit">

这个标签包裹提交按钮

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

之后在里面写input框

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

更改rules用函数进行校验

 trigger里有两个参数一个是onBlur一个是onChange这个可以根据项目实现进行更换

在提交按钮中写入native-type="submit"来验证表单内容

native-type="submit"

效果实现如下： 

 

局部校验 

如果想需要得到单个字段的检验结果就需要绑定对应的方法

给form设置一个ref值，通过this.$refs.值.validate('里面的方法名').then(()=>).catch(()=>{})来判断是否通过

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

全局校验 

如果是全局校验则无需写括号中的name

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

这里看一下hooks的写法：

/* 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,
    }
}