使用yup和自定义验证验证react-final-form表单

npm install react-final-form yup

import React from 'react';
import { Form, Field } from 'react-final-form';
import { object, string } from 'yup';

const validationSchema = object().shape({
  username: string().required('用户名不能为空'),
  password: string().required('密码不能为空'),
});

const validate = values => {
  const errors = {};
  if (values.password && values.password.length < 8) {
    errors.password = '密码长度不能小于8位';
  }
  return errors;
};

const MyForm = () => {
  const handleSubmit = values => {
    // 处理表单提交的逻辑
    console.log(values);
  };

  return (
    <Form
      onSubmit={handleSubmit}
      validate={validate}
      initialValues={{}} // 可以设置表单的初始值
    >
      {({ handleSubmit, submitting }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <label>用户名：</label>
            <Field name="username" component="input" type="text" />
          </div>
          <div>
            <label>密码：</label>
            <Field name="password" component="input" type="password" />
          </div>
          <button type="submit" disabled={submitting}>提交</button>
        </form>
      )}
    </Form>
  );
};