Публикации по теме 'yup'
Обработка форм React и проверка с помощью Formik и Yup
Использование Formik для упрощения создания форм React, избегая при этом магии
Обработка и управление формами в приложениях React - это слишком хлопотно. Существует много разных библиотек, но они делают гораздо больше, чем вы на самом деле хотите. На помощь приходит Формик . Согласно документации, Formik в основном выполняет 3 вещи:
Получение значений в состоянии формы и вне его Сообщения о проверке и ошибках Обработка отправки формы
Круто, и этот пост рассказывает вам, как..
React — Базовое создание и проверка форм с помощью Formik и Yup
В этой статье мы узнаем, как создать базовую форму с помощью Formik и другой библиотеки под названием Yup, которая позволяет нам выполнять проверку за несколько шагов. В приложениях React обработка форм и управление ими не так просто. В диспетчере пакетов Node есть много библиотек ( NPM ). Formik помогает нам создавать формы более простым способом вместе с Yup. Прежде чем мы начнем, мы рассмотрим основы Formik и Yup.
# Формик
Согласно документам, Formik — это небольшая..
Проверка формы React с Formik, Yup и GraphQL
Проверка формы регистрации пользователя звучит так просто, не правда ли? Просто убедитесь, что указанный адрес электронной почты сформирован правильно, и что пароль соответствует всем критериям, и все в порядке, верно?
Что касается меня, то только когда я начинаю реализовывать код, я понимаю, что на самом деле есть много движущихся частей. Это особенно верно при подключении полного стека приложения JavaScript , в данном случае клиента React и Apollo с сервером Express и GraphQL..
Проверка формы Simple React с Formik, Yup и / или Spected
Недавно я написал несколько форм с проверкой на работе. Поскольку мне нравится работать с библиотеками, особенно с теми, которые помогли мне в этом, я хотел бы познакомить вас с ними.
Давайте создадим простую форму регистрации для демонстрации. Такая форма обычно содержит адрес электронной почты пользователя, пароль, подтверждение пароля и согласие с условиями.
Formik
Сначала создаем форму регистрации с библиотекой Formik . Мне нравится Formik, потому что он легкий, почти не..
Динамическая форма Javascript с обработкой ошибок и проверкой
Одна форма для управления ими всеми с помощью React, Typescript, хуков, формы реакции-хука, материального пользовательского интерфейса и Ага.
Формы являются важной частью большинства веб-приложений и основным способом ввода и отправки данных пользователями. Это означает, что он часто отображается на нескольких страницах и в разных компонентах приложения.
Формы, вероятно, будут содержать много похожих полей ввода и ожидаемого поведения в отношении проверки, проверки типа, отправки..
Вопросы по теме 'yup'
проверка формы semantic-ui-react с помощью Yup
Я прочитал это решение , но на самом деле это не отвечает на вопрос. Я использую formik и semantic-ui-react. Можно ли использовать Yup с semantic-ui-react? Если да, может ли кто-нибудь привести пример?
1409 просмотров
schedule
18.09.2022
Как проверить минимальный возраст с помощью yup и moment.js?
Я создал некоторую схему регистрации
export const registrationSchema = (translate) => Yup.object().shape({
//... other properties that are validated.
// for example username
username: Yup.string()
.min(6,...
12379 просмотров
schedule
06.08.2022
Автозаполнение понижающей передачи onBlur, сбрасывающее значение с помощью Formik
У меня есть форма с полем, в котором должны отображаться предложения через вызов API. Пользователю должно быть разрешено выбрать один из этих параметров или нет, и это значение, которое он вводит, используется для отправки с формой, но это поле...
2733 просмотров
schedule
01.05.2022
Yup.string (). Match () чередуется между допустимым и недопустимым при вводе
Попытка проверить поле номера телефона в Formik с использованием схемы проверки Yup, но когда я использую Yup.string().matches(/^[0-9]*$/g, 'This is not a number') , она последовательно чередуется между действительным и недействительным при каждом...
3323 просмотров
schedule
27.08.2023
Как использовать React с Yup Validation (без Formik)
Любая идея, как я могу выполнить проверку ввода React с помощью Yup (без Formik)?
Я не нашел в Интернете ни одного хорошего примера. Спасибо
4832 просмотров
schedule
06.08.2022
Динамическое создание схемы вложенных объектов Yup
Для этого "плоского" объекта проверка
const fields = [
{label: 'Name', name: 'name', validation: yup.string().required()},
{label: 'City', name: 'city', validation: yup.string().required()},
{label: 'Phone', name: 'phone'},
]
Я создал...
3867 просмотров
schedule
12.05.2022
Yup.when: `NaN` (преобразование из значения `NaN`)
Я пытаюсь реализовать довольно простую проверку поля/выбора формы. Схема проверки:
vehicleProvider: Yup.object() // This is an object which is null by default
.required('formvalidation.required.message')
.nullable(),
reserveVehicle:...
5952 просмотров
schedule
26.10.2022
React, Formik, Yup: Проверить порядок массива
Я создал простую форму с помощью React, Formik и Yup. Он содержит список чисел. Я хочу убедиться, что список идет по возрастанию:
1,2,3 действительно
1,5 100 действительно
3,1,2 недействительно
100,99,98 недействительно
Я проверил...
763 просмотров
schedule
23.06.2023
Как проверить форму с помощью Yup и Formik
Мне нужно проверить флажки, если они находятся в DOM.
Это моя схема проверки. Итак, в зависимости от того, является ли какое-то состояние истинным или ложным, я показываю флажок подтверждения1 или подтверждения2. В настоящее время в полях не...
650 просмотров
schedule
19.04.2022
Машинопись со стилизованным условным CSS компонентом для пользовательских свойств
У меня есть 2 похожих вопроса: я недавно работал с машинописным текстом, но мне нужно, чтобы мой код стилизованного компонента был валидирован для машинописного текста.
1. Мне нужно описать настраиваемую опору - тень, потому что ошибка возврата...
1175 просмотров
schedule
04.09.2022
Проверка текстовых полей. Реагировать: формик, ага
У меня есть текстовые поля, и мне нужно выполнить его проверку. Вот мой пример кода:
export default function UserInformation() {
<form className={classes.root} autoComplete="off">
<div>
<div>...
339 просмотров
schedule
17.12.2022
Как я могу вложить этот объект в другой с помощью проверки React / Formik и Yup?
Я пытаюсь узнать, как использовать Formik и Yup для проверки поля формы ввода (текста). Я последовал стандартному подходу Джареда Палмера, и он отлично сработал прямо из коробки.
Когда дело доходит до чего-то, что немного больше зависит от...
133 просмотров
schedule
12.10.2022
Как установить динамические сообщения об ошибках при асинхронной проверке Yup?
Я пытаюсь выполнить асинхронную проверку в Formik, используя метод Yup .test() , и мне нужно установить сообщение об ошибке, которое я получаю от API. Сообщения об ошибках будут отличаться в зависимости от некоторых условий в бэкэнде.
Пробовал...
5749 просмотров
schedule
21.06.2023
Да проверка для динамического поля флажка
Я пытаюсь добавить валидацию «да» в мою форму реакции для динамически созданного массива флажков, но, похоже, не могу закрепить часть проверки «да».
Функциональность, которую я хочу достичь, заключается в следующем: для продвижения вперед должен...
1581 просмотров
schedule
02.12.2022
Да и Formik проверка в React
У меня есть условие, что требуется определенное поле, если значение равно «1», «2», «3», «4». Как это сделать? Пожалуйста, проверьте мой код ниже
travelDate: yup.string().when('planeAvailable', {
is: '1' || '2' || '3' || '4',
then:...
43 просмотров
schedule
31.05.2023
Как отправить только значение выбранной опции с помощью response-select и response-hook-form
Я пытаюсь создать форму с настраиваемыми универсальными компонентами, используя RHF и response-select.
Когда я отправляю форму, я хочу, чтобы select давал мне 'option-1' вместо { value: 'option-1', label: 'Option 1' } .
Хотя это не кажется...
372 просмотров
schedule
04.06.2023
Да, проверка, чтобы убедиться, что массив содержит хотя бы один элемент
У меня есть такой массив
{
array: ["1", "4"]
}
но я хочу добавить к нему проверку да - если массив пуст - так что хотя бы один элемент находится в массиве
Я пробовал что-то подобное - но не работает
myArray:...
124 просмотров
schedule
02.10.2022
Динамически изменять значение в Formik при изменении состояния
Мне нужно менять значение в полях формы каждый раз, когда изменяется состояние (называемое selectedProduct, его поле ввода не включено в тег Formik). Я старался:
помещая значение, которое я хочу, в initialValues (очевидно, не работает, потому...
20 просмотров
schedule
08.07.2022
