ant-desigin-vue中form表单的使用解读
作者：别样红。
这篇文章主要介绍了ant-desigin-vue中form表单的使用解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
ant-desigin-vue中form表单使用
form表单的使用
form表单之获取表单的数据
创建表单
- 通过ant-design-vue去获取表单的数据是使用v-decorator的方式去给每个项去注册，这样才能通过组件去拉取表单的数据，同时对必填项做校验；
<template>
<a-form @submit="handleOk" :form="form">
// :form="form" 必须优先注册
<!-- 客户姓名 -->
<a-form-item
:labelCol="labelCol" // 排列样式
:wrapperCol="wrapperCol"
label='客户姓名：'
>
<a-input
v-decorator="[
'name', // 给表单赋值或拉取表单时，该input对应的key
{rules: [{ required: true, message: '请输入客户名称!' }]}
]"
placeholder="请输入客户名称"/>
</a-form-item>
</a-form>
</template>
export default {
data() {
return {
form: this.$form.createForm(this), // 只有这样注册后，才能通过表单拉取数据
}
}
}拉取表单数据的方法
- 通过validateFields的方法，能够校验必填项是否有值，若无，则页面会给出警告！
this.form.validateFields((err, values) => {
if (err) {
// 这里做逻辑处理
console.log(values) // { name: '' }
}
}清空表单的方法
- 执行this.form.resetFields()，则会将表单清空。
给表单赋值
- 值得一提的是，setFieldsValue只有通过这种方式给表单赋值，拉取表单的时候才能拉取到值，其他设置默认值的方式，拉取表单时都无法获取到默认值。
this.form.setFieldsValue({
name: '设置值'
})给表单中添加自定义校验
- 现在给表单添加自定义校验的方式，是从你开始输入时就在校验，讨厌的警告一直存在，直到你输入完整才会消失，个人觉得这种方式不太友好！
<a-form-item
v-bind="formItemLayout"
label="E-mail"
>
<a-input
v-decorator="[
'email',
{
rules: [{
type: 'email', message: 'The input is not valid E-mail!',
}, {
required: true, message: 'Please input your E-mail!',
}]
}
]"
/>
</a-form-item>推荐使用下面的方式做自定义校验，当输入框失去焦点后再去校验是否正确
这种方法的思路是：
- 当输入框失去焦点时，校验是否为空同时是否匹配正则
- 给该单个输入框设置错误信息，并在页面给出警告。
<a-form-item
:labelCol="labelCol"
:wrapperCol="wrapperCol"
label='手机：'
>
<a-input
type="number"
v-decorator="[
'phone',
{
rules: [
{ required: false, message: '请输入手机号码!' },]
},
]"
@blur="validatePhoneBlur"
placeholder='请输入手机号码' />
</a-form-item>
// 校验事件
validatePhoneBlur(e) {
const validatePhoneReg = /^1\d{10}$/
if (e.target.value && !validatePhoneReg.test(e.target.value)) {
const arr = [{
message: '您输入的手机格式不正确!',
field: 'phone',
}]
this.form.setFields({ phone: { value: e.target.value, errors: arr } })
}
},使用ant-desigin-vue中form表单遇到的坑
form.validateFields() 不执行
问题：
提价表单时，发现验证不通过时正常提醒，但验证通过后点击提交又没反应。
最后发现是因为validateFields函数没被执行，通过一步步排查原来是字段验证的部分有问题。
const validateCode = (rule, value, callback) => {
if (value == '') {
callback(new Error('请输入字典编号'));
}
else if(!/^[A-z0-9-_]+$/.test(value)){
callback(new Error('请输入正确格式编号'));
}
else if(value.length>32){
callback(new Error('最大长度为 32 个字符'));
}
};上面的代码中，在字典编号格式验证通过后，没有写else，没有任何动作，当然也没有调用callback 。
可是在 antd 中明确写到自定义校验（注意，callback 必须被调用） ，所以造成了悲剧。
既然问题找到了，哪就好解决了，接下来加入else判断即可：
const validateCode = (rule, value, callback) => {
if (value == '') {
callback(new Error('请输入字典编号'));
}
else if(!/^[A-z0-9-_]+$/.test(value)){
callback(new Error('请输入正确格式编号'));
}
else if(value.length>32){
callback(new Error('最大长度为 32 个字符'));
}
else{
callback()
}
};正好我的同事也遇到了相似的问题，我想着小露一手的时候到了。不出意外的话...意外就出现了。
先看一下代码：
validatePhone(rule, value, callback) {
if (!value) {
callback()
} else {
if (new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/).test(value)) {
var params = {
tableName: 'sys_user',
fieldName: 'phone',
fieldVal: value,
dataId: this.userId
}
duplicateCheck(params).then(res => {
if (res.success) {
callback()
} else {
callback('手机号已存在!')
}
})
} else {
callback('请输入正确格式的手机号码!')
}
}
}咋一看没问题吧，每一个判断下都有回调函数callback。离谱的是最后找了个把小时才发现原来是if判断里有一个请求API（duplicateCheck）没有引入，关键是还没有任何报错提示。
总结：
- 检查每一个判断里是否调用了callback函数
- 如果判断里发送了请求，一定记得提前引入API
表单验证 async-validator: ['xxx is not a string']
问题：
在方法校验的时候，会有一部分非 String 类型表单项提示校验未通过，console中显示 async-validator: ["xxx is not a string"]。
解决：
- 去掉 :rules 规则中的 trigger 属性即可；
- 如果是验证数字格式的，就设为type: 'number’。如：
Money: { rules: [{ required: true, type: 'number', message: '请输入金额！', trigger: 'change' }] },总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。