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() 表示校验通过