Блог

Эй, в настоящее время я работаю над проверкой с использованием настраиваемых входных данных 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 amp;amp; <p className="error">{errorText}</p>}
    </>
  );
  

Я подготовил небольшую демонстрацию на codesandbox

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