AntDesign Form表单的自定义校验_综合

项目antD版本：3.19

使用antD的form来管理我们的表单的时候，我们有时候需要自定义规则校验某个字段，这个时候就可以在rules里面添加validator属性，指向我们定义的方法。

<Form.Item label='下午结束时间'>{getFieldDecorator('pmEndTime', {initialValue: moment('18:00:00', 'HH:mm:ss'),rules: [{validator: this.pmEndValid}],})(<TimePicker placeholder='请选择下午结束时间' style={
   { width: '100%' }} />)}
</Form.Item>

pmEndValid方法：

pmEndValid = (rule, value, callback) => {const { form } = this.props;if (!value) {// 下午结束时间没有值 执行：callback('请选择下午结束时间')} else if (!form.getFieldValue('pmStartTime')) {// 下午开始时间没有值 执行：// callback('请选择下午开始时间')callback()} else if (value.valueOf() < form.getFieldValue('pmStartTime').valueOf()){// 上午开始和结束时间都有值，并且开始时间大于结束时间callback('结束时间要大于开始时间')}callback()}

无论哪种逻辑，必须要执行一个callback

其中：

callback('123')：校验不通过并且返回提示123

callback()：校验通过