Ant Design React 的getFieldDecorator属性里面的rules校验规则，及其样例

getFieldDecorator 是 Ant Design React 库中的一个高阶组件，用于处理表单数据绑定和验证。其 rules 属性用于定义表单项的验证规则，以确保用户输入的数据是有效的。

以下是一个简单的例子，展示了如何在 Ant Design 的 FormItem 组件中使用 getFieldDecorator 并设置 rules：

import React from 'react';
import { Form, Input, Button } from 'antd';
 
const FormItem = Form.Item;
 
class MyForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
 
  render() {
    const { getFieldDecorator } = this.props.form;
 
    return (
      <Form layout="inline" onSubmit={this.handleSubmit}>
        <FormItem label="Username">
          {getFieldDecorator('username', {
            rules: [
              { required: true, message: 'Please input your username!' },
              { min: 5, message: 'Username must be at least 5 characters.' }
            ]
          })(
            <Input placeholder="Username" />
          )}
        </FormItem>
        <FormItem>
          <Button type="primary" htmlType="submit">Submit</Button>
        </FormItem>
      </Form>
    );
  }
}
 
export default Form.create()(MyForm);

在这个例子中，我们创建了一个带有用户名字段的表单。getFieldDecorator 的第二个参数中的 rules 数组定义了该字段的验证规则：

1. required: true 表示这个字段是必填的。
2. { min: 5, message: 'Username must be at least 5 characters.' } 规定用户名必须至少有 5 个字符。

如果用户提交表单而不满足这些规则，将会看到相应的错误消息。如果所有字段都验证通过，控制台将输出表单的值。