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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| <script setup lang="ts">
| import { ContentWrap } from '@/components/ContentWrap'
| import { Form, FormSchema } from '@/components/Form'
| import { useValidator } from '@/hooks/web/useValidator'
| import { useForm } from '@/hooks/web/useForm'
| import { reactive } from 'vue'
| import { FormItemRule } from 'element-plus'
|
| const { formRegister, formMethods } = useForm()
|
| const { getFormData } = formMethods
|
| const { required, lengthRange, notSpace, notSpecialCharacters } = useValidator()
|
| const formSchema = reactive<FormSchema[]>([
| {
| field: 'field1',
| label: '必填',
| component: 'Input'
| },
| {
| field: 'field2',
| label: '长度范围',
| component: 'Input'
| },
| {
| field: 'field3',
| label: '不能有空格',
| component: 'Input'
| },
| {
| field: 'field4',
| label: '不能有特殊字符',
| component: 'Input'
| },
| {
| field: 'field5',
| label: '是否相等-值1',
| component: 'Input'
| },
| {
| field: 'field6',
| label: '是否相等-值2',
| component: 'Input'
| }
| ])
|
| const rules = reactive<{
| [key: string]: FormItemRule[]
| }>({
| field1: [required()],
| field2: [
| lengthRange({
| min: 2,
| max: 5
| })
| ],
| field3: [notSpace()],
| field4: [notSpecialCharacters()],
| field5: [
| {
| asyncValidator: async (_, val, callback) => {
| const formData = await getFormData()
| const { field6 } = formData
| if (val !== field6) {
| callback(new Error('两个值不相等'))
| } else {
| callback()
| }
| }
| }
| ]
| })
| </script>
|
| <template>
| <ContentWrap title="useValidator">
| <Form :schema="formSchema" :rules="rules" @register="formRegister" />
| </ContentWrap>
| </template>
|
|
