Skip to content

Commit a190d13

Browse files
xiaodemenJustineo
xiaodemen
authored and
Justineo
committed
docs: update form docs
Change-Id: I2f2c7e54308a84fe61c5fe2d78179cbefcc95203
1 parent d4ecca4 commit a190d13

File tree

6 files changed

+571
-4
lines changed

6 files changed

+571
-4
lines changed

‎one/docs/components/form.md

Lines changed: 70 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,22 @@
3232

3333
[[ demo src="/demo/form/validate.vue" ]]
3434

35+
### 规则校验
36+
37+
[[ demo src="/demo/form/rule.vue" ]]
38+
39+
### 异步联合校验
40+
41+
[[ demo src="/demo/form/validator.vue" ]]
42+
43+
### 前置、后置校验
44+
45+
[[ demo src="/demo/form/before-after.vue" ]]
46+
47+
### 警告信息
48+
49+
[[ demo src="/demo/form/warn.vue" ]]
50+
3551
### 抽象表单项
3652

3753
[[ demo src="/demo/form/abstract.vue" ]]
@@ -124,6 +140,60 @@
124140
`beforeValidate`、`validate`、`afterValidate` 流程中某一项返回中断时触发，回调参数为流程 function 的返回值，参数为 `(result)`，表示流程中断的信息，具体返回值类型由流程返回决定。具体提交流程请参考[表单 › 表单提交流程](#表单提交流程)，`validate` 逻辑见[表单 › 表单校验逻辑](#表单校验逻辑)。
125141
^^^
126142

143+
### 方法
144+
| 方法 | 描述 |
145+
| -- | -- |
146+
| ``submit`` | [^method-submit] |
147+
| ``validate`` | [^method-validate] |
148+
| ``clearValidities`` | [^method-clearvalidities] |
149+
| ``setValidities`` | [^method-setvalidities] |
150+
151+
^^^method-submit
152+
手动提交表单。
153+
```ts
154+
function submit(): void
155+
```
156+
^^^
157+
158+
^^^method-validate
159+
手动校验表单。
160+
```ts
161+
function validate(fieldNames?: Array<string> | null): Promise<boolean | Record<string, Object>>
162+
```
163+
可选参数 `fieldNames` 可以指定进行校验的字段。
164+
165+
返回值是 `Promise`, 校验成功解析为 `true`，校验失败则解析为 `Record<string, Object>`，其中 key 是错误字段名称。
166+
^^^
167+
168+
^^^method-clearvalidities
169+
手动清除表单校验信息。
170+
```ts
171+
function clearValidities(fieldNames?: Array<string> | null): void
172+
```
173+
可选参数 `fieldNames` 可以指定清除的字段。
174+
^^^
175+
176+
^^^method-setvalidities
177+
手动设置表单校验信息。
178+
:::warning
179+
该方法并不能覆盖 `rules` 和 `validators` 产生的校验信息。
180+
:::
181+
```ts
182+
type InputValidity = {
183+
status: 'success' | 'warning' | 'error'
184+
message: string
185+
}
186+
function setValidities(validities: Record<string, string | InputValidity>): void
187+
188+
// 示例：将表单提交返回错误添加到表单中
189+
this.$refs.form.setValidities({
190+
name: 'name error',
191+
email: 'email error'
192+
})
193+
```
194+
^^^
195+
196+
127197
### 表单提交流程
128198

129199
<img class="preview hero" src="/images/development/form/flow.png">
@@ -179,10 +249,6 @@ validators: [
179249
```
180250
+++
181251

182-
#### `Field` 的 `rule` 和 `validators` 的优先级
183-
184-
校验失败的信息会添加到对应的 `Field` 的 `validities` 信息中。由于同个操作触发的校验，`validators` 的校验结果优先级大于 `Field` 的 `rule`，不同操作触发的校验，展现最后一个结果。`Field` 的 `rule` 内部的优先级，请参考其 [`rules`](./field#props-rules) 属性。
185-
186252
#### 交互过程的校验
187253

188254
<img class="preview hero" src="/images/development/form/interaction.png">

‎one/docs/demo/form/before-after.vue

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<template>
2+
<article class="veui-form-demo">
3+
<veui-form
4+
ref="form"
5+
:data="storeData4"
6+
:before-validate="beforeValidate"
7+
:after-validate="afterValidate"
8+
>
9+
<veui-field
10+
field="name"
11+
name="name"
12+
label="姓名"
13+
:rules="requiredRule"
14+
>
15+
<veui-input v-model="storeData4.name"/>
16+
</veui-field>
17+
18+
<veui-field
19+
field="phone"
20+
name="phone"
21+
:rules="phoneRule"
22+
label="手机"
23+
>
24+
<veui-input
25+
v-model="storeData4.phone"
26+
name="phone"
27+
autocomplete="off"
28+
/>
29+
</veui-field>
30+
31+
<template #actions="{ validating }">
32+
<veui-button
33+
ui="primary"
34+
:loading="validating"
35+
type="submit"
36+
>提交</veui-button>
37+
</template>
38+
</veui-form>
39+
</article>
40+
</template>
41+
42+
<script>
43+
import {
44+
Form,
45+
Fieldset,
46+
Field,
47+
Span,
48+
Input,
49+
Button,
50+
Select,
51+
Checkbox,
52+
CheckboxGroup,
53+
NumberInput,
54+
Transfer,
55+
ConfigProvider
56+
} from 'veui'
57+
import confirmManager from 'veui/managers/confirm'
58+
59+
export default {
60+
name: 'demo-form',
61+
components: {
62+
'veui-input': Input,
63+
'veui-button': Button,
64+
'veui-form': Form,
65+
'veui-field': Field
66+
},
67+
data () {
68+
return {
69+
storeData4: {
70+
name: '曹达华',
71+
phone: '18888888888'
72+
},
73+
requiredRule: [
74+
{
75+
name: 'required',
76+
value: true,
77+
triggers: 'blur,input'
78+
}
79+
],
80+
phoneRule: [
81+
{ name: 'required', triggers: 'change,input,blur' },
82+
{
83+
name: 'pattern',
84+
value: /^1\d{10}$/,
85+
message: '请输入正确的手机号',
86+
triggers: 'blur'
87+
}
88+
]
89+
}
90+
},
91+
92+
methods: {
93+
beforeValidate () {
94+
return new Promise((resolve) => {
95+
confirmManager
96+
.warn('前置校验通过吗？', '确认', {
97+
ok: () => {}
98+
})
99+
.then((ok) => {
100+
resolve(ok)
101+
})
102+
})
103+
},
104+
afterValidate () {
105+
return new Promise((resolve) => {
106+
confirmManager
107+
.warn('后置校验通过吗？', '确认', {
108+
ok: () => {}
109+
})
110+
.then((ok) => {
111+
resolve(ok)
112+
})
113+
})
114+
}
115+
}
116+
}
117+
</script>
118+
119+
<style lang="less" scoped>
120+
@import "~veui-theme-dls/lib.less";
121+
122+
.veui-form-demo {
123+
.operation {
124+
margin-top: 60px;
125+
margin-left: 120px;
126+
127+
[class*="veui"] {
128+
margin-left: 10px;
129+
}
130+
131+
[class*="veui"]:first-child {
132+
margin-left: 0;
133+
}
134+
}
135+
}
136+
</style>

‎one/docs/demo/form/rule.vue

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<template>
2+
<article class="veui-form-demo">
3+
<veui-form
4+
ref="form"
5+
:data="storeData4"
6+
>
7+
<veui-field
8+
field="name"
9+
name="name"
10+
label="姓名"
11+
:rules="requiredRule"
12+
>
13+
<veui-input v-model="storeData4.name"/>
14+
</veui-field>
15+
16+
<veui-field
17+
field="phone"
18+
name="phone"
19+
:rules="phoneRule"
20+
label="手机"
21+
>
22+
<veui-input
23+
v-model="storeData4.phone"
24+
name="phone"
25+
autocomplete="off"
26+
/>
27+
</veui-field>
28+
29+
<template #actions="{ validating }">
30+
<veui-button
31+
ui="primary"
32+
:loading="validating"
33+
type="submit"
34+
>提交</veui-button>
35+
</template>
36+
</veui-form>
37+
</article>
38+
</template>
39+
40+
<script>
41+
import {
42+
Form,
43+
Fieldset,
44+
Field,
45+
Span,
46+
Input,
47+
Button,
48+
Select,
49+
Checkbox,
50+
CheckboxGroup,
51+
NumberInput,
52+
Transfer,
53+
ConfigProvider
54+
} from 'veui'
55+
56+
export default {
57+
name: 'demo-form',
58+
components: {
59+
'veui-input': Input,
60+
'veui-button': Button,
61+
'veui-form': Form,
62+
'veui-field': Field
63+
},
64+
data () {
65+
return {
66+
storeData4: {
67+
name: '',
68+
phone: '1888888888a'
69+
},
70+
requiredRule: [
71+
{
72+
name: 'required',
73+
value: true,
74+
triggers: 'blur,input'
75+
}
76+
],
77+
phoneRule: [
78+
{ name: 'required', triggers: 'change,input,blur' },
79+
{
80+
name: 'pattern',
81+
value: /^1\d{10}$/,
82+
message: '请输入正确的手机号',
83+
triggers: 'blur'
84+
}
85+
]
86+
}
87+
}
88+
}
89+
</script>
90+
91+
<style lang="less" scoped>
92+
@import "~veui-theme-dls/lib.less";
93+
94+
.veui-form-demo {
95+
.operation {
96+
margin-top: 60px;
97+
margin-left: 120px;
98+
99+
[class*="veui"] {
100+
margin-left: 10px;
101+
}
102+
103+
[class*="veui"]:first-child {
104+
margin-left: 0;
105+
}
106+
}
107+
}
108+
</style>

0 commit comments

Comments
 (0)