如何使用react钩子在表单中进行多重验证

npm install react react-dom
npm install --save-dev react-hooks-validation

yarn add react react-dom
yarn add --dev react-hooks-validation

import React from 'react';
import { useForm, useValidator } from 'react-hooks-validation';

function MyForm() {
  const { handleSubmit, handleChange, values, errors } = useForm();
  const { validate, isValidationSuccessful } = useValidator();

  const handleFormSubmit = () => {
    if (isValidationSuccessful()) {
      // 表单验证通过后的处理逻辑
    }
  };

  return (
    <form onSubmit={handleSubmit(handleFormSubmit)}>
      <input type="text" name="username" onChange={handleChange} value={values.username} />
      {errors.username && <span>{errors.username}</span>}

      <input type="password" name="password" onChange={handleChange} value={values.password} />
      {errors.password && <span>{errors.password}</span>}

      <button type="submit">提交</button>
    </form>
  );
}

export default MyForm;

import { required, minLength, maxLength, pattern } from 'react-hooks-validation';

function MyForm() {
  const { handleSubmit, handleChange, values, errors } = useForm();
  const { validate, isValidationSuccessful } = useValidator();

  // 定义验证规则
  const validationRules = {
    username: [required('用户名不能为空')],
    password: [
      required('密码不能为空'),
      minLength(6, '密码长度不能小于6位'),
      maxLength(12, '密码长度不能超过12位'),
      pattern(/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/, '密码必须包含至少一个字母和一个数字')
    ]
  };

  const handleFormSubmit = () => {
    validate(validationRules); // 执行表单验证

    if (isValidationSuccessful()) {
      // 表单验证通过后的处理逻辑
    }
  };

  // ...
}