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);
  };

自定义错误消息可以存在于表单中的任何位置，您不需要将引用绑定到它。 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

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

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

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

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

1 个答案: