反应挂钩形式如何检查邮件是否相等

Question

我想知道如何检查两个输入是否相等？我的意思是我想进行表单验证，我将检查第一个输入是否与第二个输入相同。有人知道怎么做吗？

import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>
        Mail:
        <input {...register("mail", { required: true })} />
      </label>
      {errors.mail && <p>Mails are not matching</p>}
      <label>
        Confirm mail:
        <input {...register("mail", { required: true })} />
      </label>
      {errors.mail && <p>Mails are not matching</p>}
      <button type="submit">Send</button>
    </form>
  );
}

如果有什么不明白的地方随时问:)

Answer 1

很简单。您获得了 onSubmit = (data) 上的值，因此您可以从那里访问字段。

另外，您不能用相同的名称注册 2 个字段。你可以这样做：

<label>
    Mail:
    <input {...register("mail", { required: true })} />
  </label>
  {errors.mail && <p>Mails are not matching</p>}
  <label>
    Confirm mail:
    <input {...register("confirmMail", { required: true })} />
  </label>

对于匹配，这是您如何操作的示例

const { mail, confirmMail } = data;
    if (mail !== confirmMail) {
        // Codes here
    }

反应挂钩形式如何检查邮件是否相等

React hook form how to check if mails are equal

javascript

forms

reactjs