react useHookForm hook 年龄小于5岁时如何抛出错误

Question

在表格中我有一个 date-picker。从 date-picker 用户选择出生日期。如果从当前日期起年龄小于五年，我想抛出一个错误。假设用户选择 2015 年，那么它应该抛出一个错误。

<div class="input-group date" data-provide="datepicker">
              <input
                {...register("dob", {
                  required: true,
                })}
                type="date"
                id="birthday"
                min="1899-01-01"
                max="2000-13-13"
                class="form-control"
                onClick={set}
              />
              {errors?.dob?.type === "required" && (
                <p>This field is required</p>
              )}
              <div class="input-group-addon">
                <span class="glyphicon glyphicon-th"></span>
              </div>
            </div>

Answer 1

您应该定义自定义 validate 函数来检查所选日期并将其传递给 register 部分。

一个最简单的例子：

const validateDate = (value) => {
    const selected = new Date(value).getFullYear();
    const now = new Date().getFullYear();
    return now - selected >= 5;
  };

...

<input
     {...register("dob", {
          required: true,
          validate: validateDate
        })}
     type="date"
     id="birthday"
     min="1899-01-01"
     max="2000-13-13"
     class="form-control"
     onClick={set}
/>
{errors?.dob?.type === "required" && (
    <p>This field is required</p>
)}
{errors?.dob?.type === "validate" && <p>Invalid date</p>}

CodeSandbox

Answer 2

因此，根据您的代码，您需要执行以下操作：

const {
    register,
    handleSubmit,
    formState: { errors },
    watch,
    setError
  } = useForm();
  const onSubmit = (data) => console.log(data);

  useEffect(() => {
    const db = watch("dob");
    if (db) {
      const dbDate = new Date(db).getFullYear();
      const currentDate = new Date().getFullYear();
      const age = currentDate - dbDate;
      if (age < 5) {
        setError("dob", {
          type: "too young",
          message: "Sorry bro! you're too young to use this ;)"
        });
      }
    }
  }, [watch("dob")]);

然后随心所欲地使用 error:

{errors?.dob?.type === "too young" && (
            <p style={{ color: "red" }}>{errors.dob.message}</p>
          )}

这是一个工作演示，展示了它的外观： https://codesandbox.io/s/funny-surf-d4gtt?file=/src/App.js:2336-2453

react useHookForm hook 年龄小于5岁时如何抛出错误

How to throw an error when the age is less than 5 years in react useHookForm hook

javascript

reactjs

react-hook-form