antd的form表单自定义验证validator的注意事项

validator 自定义验证的方法里，每个if 和else里都要加callback，不然会导致所有rule验证失效，页面上没填都不提示，或者直接导致form表单无法触发提交。

当验证不通过，控制台会打印，验证不通过的antd组件下会显示红框红字报错信息：

// 先把antd form表单的这些个方法拿到
const { getFieldDecorator, getFieldValue, validateFieldsAndScroll, setFields } = props.form; // Form.create()(你的class/函数组件名)之后，form对象就集成到了props里

callback() 不可少：

<Form.Item label="模式">
    {getFieldDecorator("p_mode", {
        rules: [
            { required: true, message: "请选择模式" },
            { validator: validateMode },
        ],
    })(
        <Radio.Group>
            <Radio value={1}>模式一</Radio>
            <Radio value={2}>模式二</Radio>
        </Radio.Group>
    )}
</Form.Item>

const validateMode = (rule, value, callback) => {
        if (value === 2) {
        	// 做一些其他操作，比如要判断另一个form.item项的值是否填了，同时符合再请求接口，and so on
            const deptCode = getFieldValue("dept_code");
            if (deptCode) {
                callback();
                // 获取接口数据
                // 。。。
            } else {
                callback("请先选择所属部门");
            }
        } else {
            callback();
        }
    };

for循环的写法也是一样的，逢 if 和 else 就要加callback()

const initConfig = [
	{
		lable: "充值额一",
		name: "amount1",
		value: amountConfig?.data?.amount1,  // 存到redux里的 接口返回的数据对象amountConfig
		key: "amount1",
	},
	{
		lable: "充值额二",
		name: "amount2",
		value: amountConfig?.data?.amount2,
		key: "amount2",
	},
	{
		lable: "充值额三",
		name: "amount3",
		value: amountConfig?.data?.amount3,
		key: "amount3",
	},
	{
		lable: "充值额四",
		name: "amount4",	
		value: "其他金额",
		rangeValue: [
			amountConfig?.data?.custom_amount_min,
			amountConfig?.data?.custom_amount_max,
		],
		key: "amount6",
	},
];

const handleBalanceLimit = (rule: any, value: any, callback: any) => {
	if (value) {
		const moneyReg=/(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
		if (moneyReg.test(value)) {
			if (Number(value) <= 5000) {
				for (const theConfig of initConfig) {
					const chkboxParValue = getFieldValue(theConfig.name);
					if (chkboxParValue) {
						if (Number(value) < Number(chkboxParValue)) {
							callback("用户余额最大值需大于等于单次充值金额");
							break;
						} else {
							// 清空数组里当前被验证的充值额文本框下的error信息
							setFields({
								[theConfig.name]: {
									value: chkboxParValue,
									// error:['xxx']  当你不设置error这个属性的时候，就表示清空form表单验证的error信息及红框状态
								},
							});
							// callback(); // 备注警示：这个不能加，跟上面这个setFields冲突（具体是error属性），会导致验证报错信息它不显示。
							continue;
						}
					} else {
						callback();
						continue;
					}                        
				}
			} else {
				callback("用户余额最大值不可超过5000");
			}
		} else {
			callback("请输入正确的金额，精确到小数点后两位");
		}
	} else {
		callback();
	}
};

react 的函数组件中，示例 .tsx文件：

import React, { useState } from "react";
import { connect, DispatchProp } from "react-redux";
import { Form, Radio} from "antd";
export interface Props extends DispatchProp {
    isShow: boolean;
    closePopup: (val) => void;
    onSubmitSuccess: (val) => void;
}

const AddDept: React.FunctionComponent<Props> = props => {
	const { isShow, closePopup, onSubmitSuccess } = props;
    /** 初始化当前页state */
    const initState = {
        addLoading: false,        
    };
    const [state, setState] = useState(initState); // react hook的方法，解构出来的这俩变量名，随意取，比如 const [yourPageState,setYourPageState] = useState(initState); 第二个变量是方法，跟react的setState一样用法，用来给第一个变量设置值的。
    const { getFieldDecorator, getFieldValue, setFieldsValue, setFields } = props.form;

	const validateMode = (rule, value, callback) => {
        if (value === 2) {
        	// 做一些其他操作，比如要判断另一个form.item项的值是否填了，同时符合再请求接口，and so on
            const deptCode = getFieldValue("dept_code");
            if (deptCode) {
                callback();
                // 获取接口数据
                // 。。。
            } else {
                callback("请先选择所属部门");
            }
        } else {
            callback();
        }
    };

	/** 提交表单 */
    const handleSubmit = (e) => {
        e.preventDefault();
        props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.info("验证通过: ", values);
                setState({
                    ...state,
                    addLoading: true,
                });
                // 调用添加部门接口
                // 。。。
            }
        });
    };

	return (
		<Form onSubmit={onSubmitIt}>
			<Form.Item label="模式">
		        {getFieldDecorator("p_mode", {
		            rules: [
		                { required: true, message: "请选择模式" },
		                { validator: validateMode },
		            ],
		        })(
		            <Radio.Group>
		                <Radio value={1}>模式一</Radio>
		                <Radio value={2}>模式二</Radio>
		            </Radio.Group>
		        )}
		    </Form.Item>
		    <Form.Item>
                <Button type="primary" htmlType="submit">
                    添加
                </Button>
            </Form.Item>
		<Form>
	)
};
const AddDeptWithForm = Form.create<Props>()(AddDeptment); // create之后 props里才有form对象
const mapStateToProps = (state: RootState) => {
    return {
        // 存到redux的值
        moduleState: state.app["your-manage/add-dept"],
    };
};
export default connect(mapStateToProps)(AddDeptWithForm);