如何从反应挂钩表单创建自定义验证？

Question

我想从下面的验证开始创建自定义验证。但到目前为止我还没有成功。我访问了 this site 并遵循了他的“自定义验证规则”中的代码，但我无法复制它。

isBefore 方法工作正常，但验证不正常。还有我们如何使用此自定义验证来放置自定义消息？

const isBefore = (date1, date2) => moment(date1).isBefore(moment(date2));

const rules = {
    publishedDate: {
        required: 'The published date is required.',
        before: isBefore(scheduledDate, expiredDate)
    },
}

<Controller
    control={control}
    name="publishedDate"
    rules={rules.publishedDate}
    render={({ onChange }) => (
        <DatePicker
            className="mb-px-8"
            onChange={(value) => {
                setPublishedDate(value);
                onChange(value);
            }}
            minDate={new Date()}
            value={publishedDate}
        />
    )}
/>

Answer 1

这是我的尝试：

您需要使用挂钩 useEffect 和控制器。在页面顶部，您需要这两个导入：

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

那么您需要位于组件外部的验证函数。

const isBefore = (date) => {
  if (!date) {
    return false;
  }
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  return date > today;
};

以上函数检查您选择的日期是将来的而不是过去的。

在您的组件下，您将所有内容都设置为 useForm

const {
    register,
    handleSubmit,
    control,
    setValue,
    watch,
    errors,
    setError,
    clearError
  } = useForm();

然后设置变量以监视日期选择器更新，并设置 useEffect 以监视更改：

  const startDate = watch("startDate");
  useEffect(() => {
    register({ name: "startDate", type: "custom" }, { validate: { isBefore } });
  });

然后您在组件内部定义一个处理程序来处理数据更改以及验证。

  const handleDateChange = (dateType) => (date) => {
    if (!isBefore(date)) {
      setError(dateType, "isBefore");
    } else {
      setError(dateType, "isBefore");
    }
    setValue(dateType, date);
    alert(date);
  };

自定义错误消息可以存在于表单中的任何位置，您不需要将 ref 绑定到它。 useForm() 和 watch('startDate') 为您控制数据。

这是可以存在于表单组件内任何位置的自定义错误消息。

请查看更新的代码框，我在提交按钮附近显示了自定义错误消息

              {errors.startDate && (
                <div variant="danger">
                  {errors.startDate.type === "isBefore" && (
                  <p>Please choose present or future date!</p>
                  )}
                </div>

这是我昨天整理的工作代码和框，并添加了一些评论。 https://codesandbox.io/s/play-momentjs-forked-1hu4s?file=/src/index.js:1494-1802

如果您点击输入然后选择一个过去的日期，然后点击提交，将显示自定义错误信息。但是，如果您 select 一个未来的日期并点击提交，则消息不会显示。

这是我使用的资源： https://eincode.com/blogs/learn-how-to-validate-custom-input-components-with-react-hook-form

您还可以从 useForm 函数中获得有关 watch 的更多信息： https://react-hook-form.com/api/useform/watch/

如何从反应挂钩表单创建自定义验证？

How to create custom validation from react hook form?

javascript

reactjs

react-hook-form