AntDesign 表单异步校验_antd 异步校验

最近有个新需求，需要对表单做异步校验，AntDesign的表单校验是基于async-validator，是支持异步校验的， 因此我让后端帮忙把后端校验的结果根据字段做成数组返回，我这边进行校验结果的二次渲染，一共两种方法

1. 方法一：利用其自带的属性来动态修改formItem的状态
   主要是formItem的help属性和validateStatus这两个属性
   help属性是提示语句，validateStatus是当前校验状态
   主要用法可以在computed里面声明并计算每一个formItem对应的help和validateStatus，（当然也可以直接将改变状态的条件绑定在属性上面，但由于还要考虑本地的校验，所以不推荐这么写）同时要在HTML中绑定这些值，当后端校验结果回来后，改变这些值的从而达到根据接口返回，改变校验状态的结果，如果后端校验通过，则清除之前的校验状态即可，但是这种方法在写法上比较繁琐，每个formItem都要绑定这两个属性，且要兼容本地的校验结果，我只是试了一下可行，但是不建议采纳，当然如果只是后端只校验其中这一两个字段，倒是挺简单的，建议根据实际情况选择该方案

2. 通过自定义校验规则validator，写一个校验方法统一校验
   validator是AntDesign的form组件检验中给出的自定义校验方法，值为一个函数：function(rule, value, callback)，其中callback在函数中必须调用，若入参为一个字符串，表示检验失败，传入的字符串为提示， 若没有传参，表示校验通过，上代码：
   先声明validator方法

customerValidator(rule, val, callback) {
	// 此处errorResponse是我根据后端返回校验结果构造的数组，当数组中有当前校验字段，表示该字段检验失败，调用callback并传入后端给的提示
	const item = this.errorResponse.find(i => (i.name[0].toLowerCase() + i.name.slice(1)) === rule.field)
	if (item) {
	  return callback(item.message)
	}
	// 校验成功
	callback()
},
1
2
3
4
5
6
7
8
9

在所有需要后端校验的字段上绑定该方法（也可以所有字段都加，因为后面校验的时候还可以限定）

<a-form-item label="姓名">
	<!-- 不妨碍写自己的前端校验规则，在rules的后面加上 { validator: customerValidator } 这一项即可  -->
	<a-input
	  placeholder="请输入姓名"
	  v-decorator="[
	    'name',
	    {
	      initialValue: record.name,
	      rules: [{ required: true, message: '请输入联系人姓名', whitespace: true }, { validator: customerValidator }]
	    }
	  ]"
	>
	</a-input>
</a-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

请求回来后，如果服务端校验有问题，我们只需要重新赋值errorResponse，并在次校验即可

handleSubmit() {
	this.form.validateFields({ force: true }, (errors, values) => {
		if(!errors) {
			Promise.then((res) => {
				if (!res.success && res.errors) { // 约定的服务端校验失败的条件
					// 重新给errorResponse赋值
					const options = this.errorResponse.map(i => i.name[0].toLowerCase() + i.name.slice(1)) // 获取服务端返回中那些字段校验失败
            		this.form.validateFields(options, { force: true }, (errors, values) => { this.errorResponse = [] }) // 再次校验表单 第二个参数中 force: true为必要参数， 表示强制重新校验， 若不设置，将不会执行校验
				}
				if(res.success) {
					// 业务代码
				}
			})
		}
	})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

建议采用第二种方法，写法和兼容性都比较好，当然如果有更好的方法，欢迎回复