Vue3+Ts，利用vee-validate封装一个验证表单类似于Elementui el-form

7.2、利用vee-validate封装一个验证表单

文档地址：https://vee-validate.logaretm.com/v4/

整体架构类似于Elmentui的el-Form + el-Form-Item + 表单

一些可能会有疑惑的地方的解释：

1. 这里的很多属性都利用了透传机制：即父组件身上的属性会透传到子组件的跟组件身上（子组件内必须有唯一一个跟组件才行）
2. 主要使用作用域插槽来将子组件的数据和方法传递给父组件使用
3. YuInput是我自己封装的输入框

Validate组件

1. 该组件结构介绍：
   1. 插槽一slot是默认插槽里面用来放YuValidateItem组件
   2. 插槽二buttonGroup是作用域插槽，默认提供一个提交按钮，并将表单清空的方法提供出去
2. 功能介绍：
   1. 绑定一个提交的方法，该提交方法触发自定义事件，一旦验证通过会将表单数据提交出去，如果验证失败，点击提交按钮没效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

validateItem组件

1. 组件结构介绍：
   1. 插槽一默认插槽，该地方写我们的表单输入框多选框等等。
   2. p标签用来错误提示
2. 组件功能介绍
   1. 框架本身通过默认插槽提供了一些方法和属性，filed用来绑定表单数据的
   2. errorMessage是表单验证失败的错误提示
   3. 我将框架提供的filed 和 errorMessage向外暴露让父组件可以访问到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<登录页面中使用效果展示和代码

1. 结构介绍
   1. css用的是TailWindCss框架，占篇幅就不贴了
   2. 最外层YuValidate内部必须嵌套YuValidateItem使用，在YuValidateItem内部写我们的表单
2. 功能介绍
   1. name字符串要和我们绑定的v-model一致，否则提交时无法获取。rules是我们绑定的自定义规则
   2. 输入框等表单需要绑定插槽提供的field

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

1. 功能介绍
   1. 该hooks提供与登录表单相关的数据和功能

import useUtils from "../../utils/utils";
import { ref } from "vue";
import * as yup from "yup";
import { useRouter } from "vue-router";
import { loginApi } from "../../api/user";
interface IUserForm {
    userName: string,
    password: string
}
export default function useLogin() {
    const utils = useUtils(),
        formData = ref<IUserForm>({
            userName: "",
            password: "",
        }),
        router = useRouter(),
        userNamerules = utils.Validate.validateEmail,
        userPassword = yup.string().required().min(8),
        loginHnadler = () => {
            loginApi({ userName: "Yu123123", password: "123456" }).then((res) => {
              utils.Storage.set({
                key: "token",
                value: res.data.token,
                expire: "1m",
              });
              router.push("/admin/user");
            });
        },
        onSubmit = (values: any) => {
          console.log(values.formData,);
        };
    return {
        formData,
        userNamerules,
        userPassword,
        loginHnadler,
        onSubmit
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<邮箱验证的代码

 const validateEmail = (value: string) => {
    // if the field is empty
    if (!value) {
        return '必填项不能为空';
    }
    // if the field is not a valid email
    const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
    if (!regex.test(value)) {
        return '格式不正确';
    }
    // All is good
    return true;
}
1
2
3
4
5
6
7
8
9
10
11
12
13

<还可以优化的地方

1. 可以直接给Validate传递rules数组来实现验证，弥补现在的问题（表单项多就会增加许多验证规则，从而导致代码不易维护）：每个YuValidateItem如果需要验证都必须传递一个rules
   1. 解决方法：最外层YuValidate用一个rules数组来收集规则，数组接受对象，然后传递给YuValidateItem组件，该组件再根据自身需要的rules自行遍历取即可
2. 样式目前都是写死的，可以通过外部传参动态调整。