Jeecg-boot 中台挖坑日记09 AntD 表单制作

之前开发的时间比较赶,所以在某些还没弄明白的地方我直接使用了 v-model 来绑定数据,没并没有使用 v-decorator,所以表单验证需要自己手动去写,异常提示也是需要单独的去做,

现在空下来了,重新整理了一下业务代码,总的来说大部分的表单元素都有demo可以对照着看,复杂的部分也只是上传组件或者一些联动的部分。

表单验证

使用 this.$form.createForm() 创建的收集器,可以通过 validateFieldsvalidateFieldsAndScroll 这两个api对收集器进行数据校验,当然需要提前在 form-item 中配置校验规则

配置校验规则
1
2
3
4
5
6
7
8
9
10
11
12
13
<a-form-item>
<a-input
v-decorator="['email',{
rules: [
{ required: true, message: '请输入您的电子邮箱!' },
{ type: 'email', message: '请输入正确的电子邮箱号!' },
],
}]"
placeholder="您的电子邮箱
>
<a-icon slot="prefix" type="mail" />
</a-input>
</a-form-item>
表单校验
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
methods:{
// 保存
handleSubmit() {
// 触发表单验证
this.form.validateFields(['email', 'password'],(err, values) => {
// ['email', 'password'] 是需要校验的字段名
...
})
},
// 保存
handleSubmit() {
// 触发表单验证
this.form.validateFields(,(err, values) => {
// 也可以直接省略 [fieldNames] 校验全部数据
...
})
},
}

这样每次在提交表单时就会触发数据校验,并且在 err 中会返回错误信息,values中返回校验过的数据,搭配 if(!err) 就可以完成业务操作了。

头像上传组件

使用 Upload 组件的 picture-card 模式来作为头像上传组件,在@change事件中对 form 进行 setFieldsValue 来赋值给 a-input:hidden 这样就可以进行校验和返回值了。

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
<template>
<a-form :form="form" @submit.prevent="handleSubmit">
<a-form-item>
<a-upload
listType="picture-card"
class="avatar-uploader"
:headers="headers"
:showUploadList="false"
:action="uploadURL"
:beforeUpload="beforeUpload"
@change="handleChange"
>
<img v-if="avatar" :src="avatar" alt="avatar" style="width:100%;" />
<div v-else>
<a-icon :type="loading ? 'loading' : 'plus'" />
<div class="ant-upload-text">Upload</div>
</div>
</a-upload>
<a-input type="hidden" v-decorator="['avatar', validatorRules.avatar]" />
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit" block>保存</a-button>
</a-form-item>
</a-form>
</template>
<script>
export default {
name: 'UserInfoEdit',
data() {
return {
avatar: '',
loading: false,
validatorRules: {
avatar: {
rules: [{ required: true, message: '请上传头像!' }]
},
},
form: this.$form.createForm(this),
}
},
methods:{
// 头像上传前检查
beforeUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2
if (!isLt2M) {
this.$message.error('图片最大限制为2MB!')
}
return isLt2M
},
// 头像修改
handleChange(info) {
if (info.file.status === 'uploading') {
this.loading = true
return
}
if (info.file.status === 'done') {
this.form.setFieldsValue({ avatar: info.file.response.url }) // 短链接提交给后端的数据
this.avatar = info.file.response.thumbUrl // 赋值给展示链接展示链接
this.loading = false
}
},
// 保存
handleSubmit() {
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
// 具体业务代码
}
})
},
}
}
</script>

当然也可以直接绑定在 Upload 组件上,我只是偷个懒不想再在验证之后去修改数据了。

动态校验规则

比如说,可以修改上传数量限制。这个时候直接修改规则并不会直接重新验证,需要重新修改数据之后才会再次校验。

  • 如果动态校验,需要校验的时候在 option 中加上 { force: true }
1
2
3
4
5
6
7
8
9
10
// 伪代码片段
methods:{
// 保存
handleSubmit() {
// 触发表单验证
this.form.validateFields({ force: true },(err, values) => {
...
})
},
}

两种提交方式(存为草稿和保存发布)

保存数据分委两种,一种是存为草稿,另一种是保存并发布;

  • 存为草稿则只需要验证一部分必填字段,其它字段如果填写就校验,并且收集所有已经填写的字段。
  • 保存校验所有字段,并且需要匹配所有规则。

暂时还没有想好,现阶段分开两个函数,存为草稿是在 validateFields 中的规则内填写需要校验的字段,并且在if(!err) 中,使用 getFieldsValue 获取整个表单数据

附:

  • AntD Vue 1.5.0+ 增加了新组件FormModel 表单 可以通过 v-model 绑定收集数据,并且校验数据了