antd 表单自定义校验validator踩坑记录

antd 表单自定义校验validator踩坑记录

---

Antd版本：3.X

简略还原某一项任务：

1. 点击新增后弹出表单

2. 要求：

a) 两个输入框必填

b) 数值范围大于等于0

c) min为空时max输入框提示先输入min

部分代码如下：

// 其中一个输入框
<FormItem
	label="min Price（大于）"
	labelCol={{ span: 10 }}
	wrapperCol={{ span: 14 }}>
    {getFieldDecorator('maxPrice', {
		rules: [
        	{
            	required: true,
                message: '不能为空',
            },
            {
            	validator: this.validatorMax
            }
       	]
       	})(
    	<Input size="small" />
    )}
</FormItem>

// 自定义验证
validatorMax = (rule, value, callback) => {
        if (!this.state.curInputMin) {
            callback('请先输入最小值')
        }
        if (this.props.dataList1.length !== 0) {
            //如果输入的最小值大于最后一项的最大值
            if (this.state.curSectionIndex + 1 === this.props.dataList1.length && parseInt(value) <= parseInt(this.state.curInputMin)) {
                callback('请输入大于' + this.state.curInputMin + '的值')
            }
            if (parseInt(value) <= parseInt(this.state.curInputMin) ||(parseInt(value) > parseInt(this.props.dataList1[this.state.curSectionIndex+1 ].minPrice)) ) {
                callback('请输入' + this.state.curInputMin + '~' + this.props.dataList1[this.state.curSectionIndex + 1].minPrice + '内的值')
            }
            callback()
        }
        callback()
    }

3. 点击确认提交表单

问题来了，提交表单之后，form.validateFields回调函数一直没有被执行

// 提交表单
confirm=()=>{
	this.props.form.validateFileds((err,val)=>{
		coneole.log(val)
		...
	)

4.

检查了好久，控制台也没有报错。。。终于，在打印this.props.dataList1[this.state.curSectionIndex+1 ]的时候发现出现了值为空的情况，卡在了判断语句里，所以一直没有执行callback()跳出

解决方法：

在判断语句里加个且该值不为空的条件

自定义校验注意事项

1 在自定义校验callback必须被调用
2 callback(‘xxx’) 表示校验未通过、callback() 表示校验通过