vue3.0+ts实现表单验证及解决vue-i18n表单验证rules自动触发问题

技术栈 vue3.0+ts+element-plus

问题就像下面图片所展示，我们每次点击右侧语言切换的时候，都会触发表单的rules，我们没有动表单，还是会出现验证信息.

1、vue3.0里面取消了this，我们在setUp里面是拿不到this的，那么我们以前的this.$ref就行不通了那我们先看看怎么实现vue3.0+ts怎么实现表单验证

首先还是ref\、rule、和model先绑定

其次我们需要将这三个分别在setup中定义出来

然后在将它们return出来

最后在看看提交的时候如何验证

到这里我们就实现了vue3.0+ts表单验证
接下来处理国际化的问题

2、因为我们要实现如果在验证的中途切换的语言的时候，error message也会跟着触发，所以我们将代码写到computed里面，

 const emailRule = computed(() => {
      const rule = {
        username: [
          {
            validator: (rule: object, value: string, callback: Function) => {
              const regpEmail = /^[_a-z0-9\u4e00-\u9fa5]+(\.[_a-z0-9\u4e00-\u9fa5]+)*@[a-z0-9\u4e00-\u9fa5]+(\.[a-z0-9\u4e00-\u9fa5]+)*(\.[a-z]{2,})$/;
              if (!value) {
                callback(new Error(t("form.emailWarning")));
              } else if (!regpEmail.test(value)) {
                callback(new Error(t("form.emailRegpWarning")));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        password: [
          { required: true, message: t("login.password"), trigger: "change" },
        ],
      };
      return rule;
    });

这只是我自己想的办法，有更好的欢迎交流

 watch(
      //# ========延时监听重置表单，不然清楚不了rules
      () => state.getTitle(),
      (count, prevCount) => {
        /* ... */
        const phoneform = phoneForm;
        const emailform = emailRef;
        setTimeout(() => {
          phoneform.value.resetFields();
          emailform.value.resetFields();
        }, 10);
      }
    );

我在watch又监听了我的当前语言，它改变的时候我就延时区重置了一下表单，开始想的是直接reload页面，结果还是选择了这种方法。

ps: 这里我没有把验证写到公共方法里面。是因为我在ts文件中引入I18n会报错，提示我应该定义在setUp中，但是这个只有vue组件才有这个方法，所以我就单独提出来了，希望有解决办法的留下你的idea