如何验证 React 组件中的条件表单字段？

Question

我是 React 的新手，我试图创建一个功能性的 SignIn 表单组件，该组件基于一个可以在 Login 和 Signup 之间切换的布尔 prop 来更改其结构。 在注册版本中，有一个额外的文本字段 Confirm password 需要使用密码字段进行验证以进行匹配。 下面是组件的验证函数。

export function SignInForm({login}) {
  const [values, setValues] = useState({});
  const [error, setErrors] = useState({});

  const validate = (values) => {
    console.log(login)
    let errors = {}
    if (!values.email) {
      errors.email = "Email address is required";
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
      errors.email = "Invalid email address";
    }
    if (!values.password) {
      errors.password = "Password is required";
    } else if (values.password.length < 2) {
      errors.password = "Password should be 2 or more characters";
    }

    if (!values.confirmPass) {
      errors.confirmPass = "This field is required";
    } else if (values.confirmPass !== values.password) {
      errors.confirmPass = "Passwords do not match";
    }
    return errors;
  }
  
  const handleChange = (event) => {
    event.persist();
    setValues(values => ({ ...values, [event.target.name]: event.target.value }));
  };

  const submitChange = (event) => {
    event.preventDefault();
    setErrors(validate(values))
  }
...

以下是返回的 JSX。

<form className={classes.form} onSubmit={submitChange}>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="email"
              label="Email Address"
              name="email"
              autoComplete="email"
              autoFocus
              value={values.email}
              onChange={handleChange}
              error={Boolean(error.email)}
              helperText={error.email}
            />
            <TextField
              ...
              value={values.password}
              onChange={handleChange}
              error={Boolean(error.password)}
              helperText={error.password}
            />
            {!login && 
            <TextField
              ...
              value={values.confirmPass}
              onChange={handleChange}
              error={Boolean(error.confirmPass)}
              helperText={error.confirmPass}
             
            />}

“...”属性对第一个 TextField 是通用的，表单的其余部分不显示，因为它们不是问题的一部分。

运行注册版本时（login == false），即使我在其中输入值，确认密码字段仍保持在“此字段为必填项”。它不执行验证。但其他字段验证得很好。

我在这里做错了什么？我该如何解决这个问题？任何线索将不胜感激。 谢谢。

Answer 1

这段代码的答案是

if(!login) {
  if (!values.confirmPass) {
    errors.confirmPass = "This field is required";
  } else if (values.confirmPass !== values.password) {
    errors.confirmPass = "Passwords do not match";
  } 
}

还有一个问题是你应该设置组件的初始状态

const [values, setValues] = useState({
    confirmPass: null,
    password: null,
    email: null,
  });
  const [error, setErrors] = useState({
    confirmPass: null,
    password: null,
    email: null,
  });

我确实有一个很好的建议给你，试着用一些东西来控制你的表单，就像 formik 和像 yup 这样的模式验证。您的代码将更加清晰和易于维护

Answer 2

你可以试试这个

if(!login) {
  if (!values.confirmPass) {
    errors.confirmPass = "This field is required";
  } else if (values.confirmPass !== values.password) {
    errors.confirmPass = "Passwords do not match";
  } 
}

由于登录为假，values.confirmPass 为空。