antd form validator自定义校验规则

需求：如果输入为空：提示不可为空，如果输入字段里有x字符串，提示不可带x，根据不同的情况提示不同的错误信息。

效果图如下：

代码如下：

import React, {Component} from 'react';
import {Button, Modal, Form, Input} from 'antd';
import styles from './index.less';

const FormItem = Form.Item;

const validateLimit = (rule, value, callback) => {
  console.log(rule);
  console.log(value);
  if (!value) {
    callback('图谱名称不可为空');
  }
  if (value.indexOf('x') !== -1) {
    callback('图谱名称不可出现 x 字样');
  } else {
    callback();
  }
};

class MapConstruction extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    return (
      <div className={styles.container}>
            <Form>
              <FormItem
                label="图谱名称"
                labelCol={{span: 5}}
                wrapperCol={{span: 18}}
              >
                {getFieldDecorator('note', {
                  rules: [{
                    required: true,
                    whitespace: true,
                    message: ' '
                  }, {validator: validateLimit}],
                })(
                  <Input placeholder='请输入'/>
                )}
              </FormItem>
            </Form>
      </div>
    );
  }
}

export default Form.create()(MapConstruction);