React+antd表单校验
React使用ant-design进行Form表单校验问题
关键字:React、Form表单校验、antd V4.18.5
V4版本最新校验规则写法
出现的错误
v4版本的antd在使用validator去设置自定义校验规格会提示警告:callback已经弃用
// 编辑最大值规则
const maxValidators = (_, value, callback) => {
if (maxCount >= minCount || minCount === null) {
// return Promise.resolve('')
callback && callback('')
} else {
// return Promise.reject('不得小于最小值')
callback && callback('不得小于最小值')
}
};
解决方案1
校验时返回Promise对象
// 编辑最大值规则
const maxValidators = (_, value, callback) => {
if (maxCount >= minCount || minCount === null) {
return Promise.resolve('')
} else {
return Promise.reject('不得小于最小值')
}
};
// 编辑最小值规则
const minValidators = (_, value) => {
if (minCount <= maxCount || maxCount === null) {
return Promise.resolve('')
} else {
return Promise.reject('不得大于最大值')
}
};
<Form.Item
name="minValue"
rules={[
{ required: true, message: '请设置最小值' },
{
validator: minValidators
}
]}
initialValue={reShowData ? reShowData.minValue : null}
>
<InputNumber
min={0}
max={100}
onChange={(value) => {
console.log('minOnChange', value);
setMinCount(value);
}}
formatter={(value) => `${value}%`}
parser={(value) => value.replace('%', '')}
/>
</Form.Item>
解决方案2
由于你的 validator 有错误导致 callback 没有执行到。你可以选择通过 async 返回一个 promise 或者使用 try…catch 进行错误捕获;
——来自antd官网
validator: async (rule, value) => {
throw new Error('Something wrong!');
}
// or
validator(rule, value, callback) => {
try {
throw new Error('Something wrong!');
} catch (err) {
callback(err);
}
}