Как сделать валидацию полей в react-native?

Пользователь

laney_johnson

от laney_johnson , в категории: JavaScript , 2 года назад

8 | 0

2 ответа

Пользователь

jamey.kohler

от jamey.kohler , 2 года назад

@laney_johnson

Существует несколько способов сделать валидацию полей в React Native:

Использование сторонних библиотек, таких как Formik или React Hook Form, которые предоставляют удобный API для создания форм с валидацией.
Использование встроенных средств React Native, таких как TextInput и TouchableOpacity, и написание собственных функций валидации. Например:

import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';

const MyForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleNameChange = value => setName(value);
  const handleEmailChange = value => setEmail(value);

  const validate = () => {
    if (!name) {
      setError('Name is required');
      return false;
    }

    if (!email) {
      setError('Email is required');
      return false;
    }

    if (!/S+@S+.S+/.test(email)) {
      setError('Email is invalid');
      return false;
    }

    setError('');
    return true;
  };

  const handleSubmit = () => {
    if (validate()) {
      // submit form
    }
  };

  return (
    
      
      
      {error ? {error} : null}
      
    
  );
};

export default MyForm;

Это пример простой формы с двумя полями (имя и электронная почта) и функцией валидации, которая проверяет, были ли заполнены оба поля и правильно ли указан адрес электронной почты.

Использование сторонних библиотек для валидации, таких как Yup или Joi. Эти библиотеки обычно предоставляют более продвинутые возможности валидации, такие как проверка на соответствие шаблону, проверка на максимальное и минимальное значение и т.д.

1 | 0

Пользователь

urban_will

от urban_will , 2 года назад

@laney_johnson

Вот как сделать валидацию полей в форме с использованием Formik в React Native:

Установите Formik и Yup:

1	npm install formik yup

Импортируйте Formik и Yup в компонент:

1 2	import { Formik } from 'formik'; import * as yup from 'yup';

Создайте схему валидации с помощью Yup:

const validationSchema = yup.object().shape({
  name: yup.string().required('Name is required'),
  email: yup.string().email('Invalid email').required('Email is required'),
});

Оберните свою форму в компонент Formik и передайте схему валидации через свойство validationSchema:

<Formik
  initialValues={{ name: '', email: '' }}
  validationSchema={validationSchema}
  onSubmit={(values) => {
    // handle form submission
  }}
>
{({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
  <View>
    <TextInput
      onChangeText={handleChange('name')}
      onBlur={handleBlur('name')}
      value={values.name}
      placeholder="Name"
    />
    {touched.name && errors.name && <Text style={{ color: 'red' }}>{errors.name}</Text>}
    
    <TextInput
      onChangeText={handleChange('email')}
      onBlur={handleBlur('email')}
      value={values.email}
      placeholder="Email"
    />
    {touched.email && errors.email && <Text style={{ color: 'red' }}>{errors.email}</Text>}
    
    <Button title="Submit" onPress={handleSubmit} />
  </View>
)}
</Formik>

В данном примере форма будет валидироваться по заданным условиям с помощью Yup, и ошибки будут отображаться под соответствующими полями ввода.

Это пример использования Formik и Yup для валидации формы в React Native, что облегчает управление состоянием формы и валидацией полей.

0 | 0

Как сделать валидацию полей в react-native?

2 ответа

Похожие обсуждения: