javascript - 无法获取react-hook-form来正确验证电子邮件

Question

我花了很长时间试图让这个正确验证，但它只是没有发生。我在底部添加了一些文本，以便在电子邮件发生错误时输出，但无论如何，它总是显示无错误。

编辑: 沙盒链接 - https://codesandbox.io/s/damp-star-8gv3l

这是我的输入:

           <div>
              <label
                htmlFor="email"
                className="block text-sm font-medium text-gray-700"
              >
                Email address
              </label>
              <div className="mt-1">
                <input
                  {...register("email", {
                    required: {
                      value: true,
                      message: "Please enter your email address",
                    },
                    pattern: {
                      value:
                        /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                      message: "Invalid email address",
                    },
                  })}
                  id="email"
                  name="email"
                  type="email"
                  autoComplete="off"
                  className={`input w-full ${
                    !errors.email && dirtyFields.email && "!bg-green-50"
                  }`}
                />
              </div>
              {errors.email ? "error" : "no error"}
              {errors.email?.message && (
                <ErrorMessage>{errors.email?.message}</ErrorMessage>
              )}
            </div>

这是我的钩子(Hook):

  const {
    register,
    watch,
    control,
    formState: { errors, isValid, dirtyFields },
  } = useForm<SignupProps>({
    defaultValues: {
      email: "",
      password: "",
      confirmPassword: "",
      username: "",
      firstName: "",
      surname: "",
      isShop: false,
    },
  });

Answer 1

根据您的代码和框，您需要更改以下内容:

• 添加<form />标签
• 添加mode: 'onChange'在useForm输入时显示错误的选项
• 如果您想在提交时触发验证，请添加提交按钮
• 显示验证中传递的错误消息

工作代码和框:https://codesandbox.io/s/autumn-sea-ps37x?file=/pages/index.js