基本介绍

class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
export default CustomizedForm;

this.props.form 属性提供的 API

getFieldDecorator

// 语法：getFieldDecorator(id, options)
<Form.Item {...layout} label="题目" extra={titleExtra}>
    {getFieldDecorator('name', {
        rules: [
            { required: true, message: '记得填写题目' },
            { whitespace: true, message: '记得填写题目' },
        ],
        initialValue: name, // 默认值设置
    })(<Input allowClear={true}/>)}
</Form.Item>

getFieldValue

let options = this.props.form.getFieldValue('name'); // 使用getFieldDecorator方法修饰的id为'name'的表单控件

setFieldsValue

 // 设置使用getFieldDecorator方法修饰的id为'name'的表单控件的值
this.props.form.setFieldsValue({ name: undefined });

validateFields

/*
    类型：
    (
      [fieldNames: string[]],
      [options: object],
      callback(errors, values)
    ) => void
*/
const { form: { validateFields } } = this.props;

validateFields((errors, values) => {
  // ...
});

validateFields(['field1', 'field2'], (errors, values) => {
  // ...
});

validateFields(['field1', 'field2'], options, (errors, values) => {
  // ...
});

// 通过 validateFields 方法验证表单是否完成填写，通过便提交添加操作。
handleOk = () => {
  const { dispatch, form: { validateFields } } = this.props;

  validateFields((err, values) => {
    if (!err) {
      dispatch({
        type: 'cards/addOne',
        payload: values,
      });
      // 重置 `visible` 属性为 false 以关闭对话框
      this.setState({ visible: false });
    }
  });
}

格式限制验证

输入框不能为空限制

{getFieldDecorator('name', {
  rules: [{
    required: true,
    message: '名称不能为空',
  }],
})(<Input placeholder="请输入名称" />)}

输入框字符限制

{getFieldDecorator('password', {
  rules: [{
    required: true,
    message: '密码不能为空',
  }, {
    min:4,
    message: '密码不能少于4个字符',
  }, {
    max:6,
    message: '密码不能大于6个字符',
  }],
})(<Input placeholder="请输入密码" type="password"/>)}

{getFieldDecorator('nickname', {
  rules: [{
    required: true,
    message: '昵称不能为空',
  }, {
    len: 4,
    message: '长度需4个字符',
  }],
})(<Input placeholder="请输入昵称" />)}

自定义校验

{getFieldDecorator('passwordcomfire', {
  rules: [{
    required: true,
    message: '请再次输入密码',
  }, {
    validator: passwordValidator
  }],
})(<Input placeholder="请输入密码" type="password"/>)}
   
//  密码验证
const passwordValidator = (rule, value, callback) => {
  const { getFieldValue } = form;
  if (value && value !== getFieldValue('password')) {
    callback('两次输入不一致！')
  }

  // 必须总是返回一个 callback，否则 validateFields 无法响应
  callback();
}

whitespace空格报错

{getFieldDecorator('nickname', {
  rules: [{
    whitespace: true,
    message: '不能输入空格',
  } ],
})(<Input placeholder="请输入昵称" />)}

pattern正则验证

{getFieldDecorator('age', {
  rules: [{
    message:'只能输入数字',
    pattern: /^[0-9]+$/
  }],
})(<Input placeholder="请输入数字" />)}