Проверка шаблона формы с помощью response-hook-form

Я работал над формой реакции, и мне нужно ограничить пользователей вводить специальные символы и разрешить только эти: [A-Za-z].

Я пробовал приведенный ниже код, но я все еще могу вставлять специальные символы, такие как: '♥', '›', '+' и т. Д.

export default Component (props {
  ...
  return (
   <input 
    pattern={props.pattern}
   /> 
  )
}

И я отправляю его как опору для своей формы:

<Component 
pattern="[A-Za-z]+"
/>

Можете ли вы сообщить мне, что мне не хватает, и указать, в чем может быть проблема? Большое спасибо.


reactjs forms react-hooks react-forms react-props
person Community    schedule 20.07.2020    source источник
comment
Вам нужно событие onChange для проверки паттерна с помощью функции pattern.test.   -  person Eric    schedule 20.07.2020
comment
Вы можете посмотреть полномасштабные демонстрации проверки формы для формы в стиле MaterialUI и формы на основе SemanticUI. Надеюсь, что любой из них даст вам представление о том, как подойти к вашей проблеме.   -  person Yevgen Gorbunkov    schedule 20.07.2020
comment
Вы можете попробовать pattern="^[a-zA-Z]+$"   -  person Yevgen Gorbunkov    schedule 20.07.2020

Ответы (2)


arrow_upward
9
arrow_downward

Атрибут pattern в input работает только с submit в обычных HTML-формах.

Если вы используете react-hook-form, он должен быть в ссылке, например:

<input
    name="email"
    ref={register({
      required: "Required",
      pattern: {
        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
        message: "invalid email address"
      }
    })}
  />

Пожалуйста, проверьте документ в форме реакции на крючок. Кроме того, для случая использования простой формы вы можете попробовать библиотеку cksform.

person anunaki    schedule 20.07.2020
comment
Это работает только при отправке, но мне нужно ограничить пользователя вводом специальных символов раньше. - person ; 20.07.2020
comment
Я не знаю, как лучше всего использовать его с формой реакции-крючка, но преобразование поля в управляемый компонент и использование api проверки html5 может сработать. Пожалуйста, проверьте codesandbox.io/s/react-hook-form-v6- seterror-swr80. Поле firstName ограничено шаблоном. Я добавлю этот вариант использования в библиотеку cksform. - person anunaki; 20.07.2020

arrow_upward
1
arrow_downward

Если вы используете response-hook-form v7, используйте это:

<input
    placeholder="Email"
    {...register('email', {
        required: 'Email is required',
        pattern: {
            value: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: 'Please enter a valid email',
        },
    })}
    type="email"
    required
    className="input"
/>
{formState.errors.email?.message && (
     <FormError errorMessage={formState.errors.email?.message} />
)}
person adarshaacharya    schedule 14.05.2021