如何在此 React 18 应用程序中即时验证表单字段？

我正在使用 React 18 和 Firebase 开发一个聊天应用程序。

In the src\pages\Register.jsx组件，我有一个可以验证的表单简单的身体验证器 https://github.com/jadKhoury1/simple-body-validator:

import React, { useState } from "react";
import FormCard from '../components/FormCard/FormCard';
import { make } from 'simple-body-validator';

export default function Register() {
 const initialFormData = {
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    passwordConfirm: ''
 };

 const validationRules = {
    firstName: ['required', 'string', 'min:3', 'max:255'],
    lastName: ['required', 'string', 'min:3', 'max:255'],
    email: ['required', 'email'],
    password: ['required', 'confirmed'],
    passwordConfirm: ['required'],
 };

 const validator = make(initialFormData, validationRules);
 const [formData, setFormData] = useState(initialFormData);
 const [errors, setErrors] = useState(validator.errors());

 const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevFormData) => ({ ...prevFormData, [name]: value }));
  };

 const handleSubmit = (event) => {
    event.preventDefault();

    if (!validator.setData(formData).validate()) {
      setErrors(validator.errors());
    }
 };
  
 return (
    <FormCard title="Register">
      <form onSubmit={handleSubmit}>
        <div className={`mb-2 form-element ${errors.has('firstName') ? 'has-error' : null}`}>
          <label for="firstName" className="form-label">First name</label>
          <input type="text" id="firstName" name="firstName" value={formData.firstName} onChange={handleChange} className="form-control form-control-sm" />
          { errors.has('firstName') ? (
          <p className="invalid-feedback">{errors.first('firstName')}</p>
        ) : null }
        </div>

        <div className={`mb-2 form-element ${errors.has('lastName') ? 'has-error' : null}`}>
          <label for="lastName" className="form-label">Last name</label>
          <input type="text" id="lastName" name="lastName" value={formData.lastName} onChange={handleChange} className="form-control form-control-sm" />
          { errors.has('lastName') ? (
          <p className="invalid-feedback">{errors.first('lastName')}</p>
        ) : null }
        </div>

        <div className={`mb-2 form-element ${errors.has('email') ? 'has-error' : null}`}>
          <label for="email" className="form-label">Email address</label>
          <input type="email" id="email" name="email" value={formData.email} onChange={handleChange} className="form-control form-control-sm" />
          { errors.has('email') ? (
          <p className="invalid-feedback">{errors.first('email')}</p>
        ) : null }
        </div>

        <div className={`mb-2 form-element ${errors.has('password') ? 'has-error' : null}`}>
          <label for="password" className="form-label">Password</label>
          <input type="password" id="password" name="password" value={formData.password} onChange={handleChange} className="form-control form-control form-control-sm" />
          { errors.has('password') ? (
          <p className="invalid-feedback">{errors.first('password')}</p>
        ) : null }
        </div>

        <div className={`mb-2 form-element ${errors.has('passwordConfirm') ? 'has-error' : null}`}>
          <label for="password_repeat" className="form-label">Confirm Password</label>
          <input type="password" id="passwordConfirm" name="passwordConfirm" value={formData.passwordConfirm} onChange={handleChange} className="form-control form-control form-control-sm" />
          { errors.has('passwordConfirm') ? (
          <p className="invalid-feedback">{errors.first('passwordConfirm')}</p>
        ) : null }
        </div>

        <div className="pt-1">
          <button type="submit" className="btn btn-sm btn-success fw-bold">Submit</button>
        </div>
      </form>
    </FormCard>
  );
 }

如果表单无效，一旦提交成功，验证错误消息将按预期显示：

问题

如果将有效数据引入无效表单，则验证错误消息和类不会在输入/更改时消失，正如我认为应该的那样。

有效字段仅在再次单击提交按钮时才通过验证虽然我希望得到反馈instant，类似于 AngularJS 或 Angular2+ 形式。

Sandbox

有一个包含代码的沙箱here https://codesandbox.io/s/infallible-cloud-wmf2jn。报名途径是/auth/register.

问题

1. 我究竟做错了什么？
2. 获得所需行为的最可靠方法是什么？

我注意到您使用的库不处理表单状态（例如脏的、原始的）。

所以，这是我的方法：

注册.tsx

/* ... */
const initialFormData = {
  firstName: "",
  lastName: "",
  email: "",
  password: "",
  passwordConfirm: ""
};

const [pristineFields, setPristineFields] = useState(() =>
  Object.keys(initialFormData)
);

const handleChange = (event) => {
  const { name, value } = event.target;

  setFormData((prevFormData) => {
    const newFormData = { ...prevFormData, [name]: value };
    const newPristineFields = pristineFields.filter((f) => f !== name);

    validator.setData(newFormData).validate();
    const validationErrors = validator.errors();
    // 'Forgetting' about pristine fields.
    newPristineFields.forEach((f) => validationErrors.forget(f));
    setErrors(validationErrors);

    setPristineFields(newPristineFields);

    return newFormData;
  });
};

/* ... */

我还在以下内容中添加了这些行submit处理程序：

const handleSubmit = (event) => {
  event.preventDefault();

  if (!validator.setData(formData).validate()) {
    setErrors(validator.errors());
  } else {
    console.log("all good");
  }

  // Validations are shown either way, so we could forget
  // about any pristine fields at this point.
  setPristineFields([]);
};

Here https://codesandbox.io/s/funny-parm-h52ync?file=/src/pages/Register.jsx是更新的 CodeSandbox 应用程序的链接。

更新 - 验证/无效确认密码

const CONFIRM_PASSWORD_KEY = "passwordConfirm";
const PASSWORD_KEY = "password";

export default function Register() {
  const initialFormData = {
    firstName: "",
    lastName: "",
    email: "",
    [PASSWORD_KEY]: "",
    [CONFIRM_PASSWORD_KEY]: ""
  };
...

然后，在setFormData的回调中，我添加了密码确认的逻辑：

...
    setFormData((prevFormData) => {
      const newFormData = { ...prevFormData, [name]: value };
      const newPristineFields = pristineFields.filter((f) => f !== name);

      validator.setData(newFormData).validate();
      const validationErrors = validator.errors();
      newPristineFields.forEach((f) => validationErrors.forget(f));

      // Other cases can be handled here..
      if (name === CONFIRM_PASSWORD_KEY) {
        if (value !== newFormData[PASSWORD_KEY]) {
          validationErrors.add(CONFIRM_PASSWORD_KEY, {
            message: "Passwords do not match."
          });
        }
      }

      setErrors(validationErrors);
      setPristineFields(newPristineFields);
      return newFormData;
    });
...