使用Antd和redux-form-antd进行自定义验证

npm install antd redux-form redux-form-antd

import React from 'react';
import { Form, Input, Button } from 'antd';
import { reduxForm, Field } from 'redux-form';
import { FormItem } from 'redux-form-antd';

const validate = (values) => {
  const errors = {};
  if (!values.username) {
    errors.username = 'Required';
  } else if (values.username.length < 5 || values.username.length > 10) {
    errors.username = 'Must be 5 to 10 characters';
  }
  return errors;
};

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <FormItem
    label={label}
    validateStatus={touched && error ? 'error' : ''}
    help={touched && error}
  >
    <Input {...input} type={type} placeholder={label} />
  </FormItem>
);

const RegistrationForm = (props) => {
  const { handleSubmit } = props;
  return (
    <Form onSubmit={handleSubmit}>
      <Field name="username" type="text" component={renderField} label="Username" />
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form>
  );
};

export default reduxForm({
  form: 'registration',
  validate,
})(RegistrationForm);

import React from 'react';
import ReactDOM from 'react-dom';
import RegistrationForm from './RegistrationForm';

const onSubmit = (values) => {
  console.log(values);
};

ReactDOM.render(<RegistrationForm onSubmit={onSubmit} />, document.getElementById('root'));

export default reduxForm({
  form: 'registration',
  validate,
})(RegistrationForm);

const handleSubmit = (e) => {
  e.preventDefault();
  this.props.form.validateFieldsAndScroll((err, values) => {
    if (!err) {
      // 处理表单提交逻辑
    }
  });
};