通过使用validate函数进行验证来应对Hook Form问题

问题描述

嘿，我目前正在使用自定义的Antd输入和React Hook表单进行验证。

目前，我在使用正则表达式验证URL字段（单个URL和一个图像）时遇到问题。

我已经检查了两个正则表达式，并且它们都正常工作

通常我无法使用正确的数据提交表单，问题发生在使用正则表达式进行验证的过程中

表单部分

<Controller
        as={
          <InputField
            label="URL"
            name="url"
            placeholder="Enter URL"
            error={errors.url}
            errorText="URL Error"
          />
        }
        control={control}
        type="text"
        name="url"
        defaultValue=""
        rules={{
          validate: (value) => {
            return INPUT.urlPattern.test(value);
          }
        }}
      />
      <Controller
        as={
          <InputField
            label="Image Url"
            name="imageUrl"
            placeholder="enter ImageURL"
            error={errors.imageUrl}
            errorText="Error on imageUrl"
          />
        }
        control={control}
        type="text"
        name="imageUrl"
        defaultValue=""
        rules={{
          validate: (value) => {
            return INPUT.imageURLPattern.test(value);
          }
        }}
      />

自定义antd输入组件渲染功能

return (
    <>
      <label className="label" htmlFor={name}>
        {label}
      </label>
      <Styled.Input
        placeholder={placeholder}
        maxLength={maxLength}
        value={value}
        onChange={handleInputCounter}
        {...(counter
          ? {
              suffix: (
                <Styled.WordCounter>
                  {counterValue} / {maxLength}
                </Styled.WordCounter>
              )
            }
          : {})}
      />
      {error && <p className="error">{errorText}</p>}
    </>
  );

我已经准备了有关codeandBox的小演示

https://codesandbox.io/s/react-hook-form-validate-antd-gyhnh?file=/src/EntryForm.tsx

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）