无法获得 react-hook-form 以正确验证 email

Question

我花了很长时间试图让这个正确验证，但它只是没有发生。 当 email 发生错误时，我在email的底部添加了一些文本，但是无论如何它总是说no error 。

编辑：沙盒链接 - 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>

这是我的钩子：

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

Answer 1

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

• 添加<form />标签
• 添加模式： useForm选项中mode: 'onChange'以在输入时显示错误
• 如果要在提交时触发验证，请添加提交按钮
• 显示验证中通过的错误消息

工作codesandbox： https://codesandbox.io/s/autumn-sea-ps37x?file=/pages/index.js