向用户显示验证反馈

Question

我正在使用 react-hook-form 和 yup 作为验证器制作一个简单的 react 表单。如果用户的输入被成功验证，我想向用户显示一些反馈，比如绿色轮廓。问题是我只想在我的输入被验证时显示绿色轮廓，而不是每次渲染组件时。我怎样才能做到这一点？组件：

const schema = yup.object().shape({
  email: yup
    .string()
    .required("This field is required"),
  password: yup.string().required("This field is required"),
});

export const Form = () => {
  const {
    register,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm({
    mode: "onBlur",
    resolver: yupResolver(schema),
  });

  return (
      <form noValidate onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        {...register("email")}
      />
     {errors.email ? errors?.email.message : null}
       <label htmlFor="password">Password</label>
      <input
        id="password"
        type="password"
        {...register("password")}
      />
      {errors.password ? errors?.password.message : null}
      <button
        type="submit"
      >
        Submit
      </button>
    </form>  
  );
};

Answer 1

你可以用感动属性实现你想要的。在这种情况下使用 touched 属性是很常见的。您可以执行以下操作：

从 useForm 挂钩中，您还可以提取 touchedFields

const {
    register,
    handleSubmit,
    getValues,
    formState: { errors, touchedFields }
  } = useForm({
    mode: "onBlur",
    resolver: yupResolver(schema)
  });

touchedFields 属性存储触摸字段。用户第一次从该字段离开焦点时触摸该字段。因此，您可以有条件地显示有关某个字段的消息，如果它被触摸并且没有这样的错误：

{touchedFields.email && !errors.email ? <div>Email ok</div> : null}

You can try this sandbox。我希望你能从中得到启发。

向用户显示验证反馈

Show validation feedback to the user

javascript

css

forms

validation

reactjs