Показать сообщение об ошибке проверки в форме с помощью React Native Expo

Сообщение об ошибке проверки в форме входа и регистрации в React Native

Здравствуйте, разработчики React Native .. !!

Когда вы создаете мобильное приложение, вы можете указать какое-то поле, откуда вы ввели данные. Будь то форма регистрации или форма входа, все, что мы делаем, - это вводим данные пользователей. Когда пользователь вводит неправильные данные в форму. Затем в форме должно отображаться сообщение об ошибке проверки. Это делает ваше приложение идеальным. Потому что теперь пользователь может видеть ошибки, которые он делает. Итак, давайте посмотрим, как вы добавляете сообщение об ошибке формы проверки в свое приложение. Все, что вам нужно, это базовое понимание javascript.

Настройте свое приложение

Запустите проект с помощью команды: expo init ValidForm

Завершите процесс установки

Создайте файл «FormList.js» внутри каталога «ValidForm».

FormList.js

import React, {useState} from 'react'
import { Text, View, TextInput, Button } from 'react-native';
function FormList() {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    const [emailError, setEmailError] = useState("")
    const [passwordError, setPasswordError] = useState("")
const handleSubmit = () => {
        var emailValid = false;
        if(email.length == 0){
            setEmailError("Email is required");
        }        
        else if(email.length < 6){
            setEmailError("Email should be minimum 6 characters");
        }      
        else if(email.indexOf(' ') >= 0){        
            setEmailError('Email cannot contain spaces');                          
        }    
        else{
            setEmailError("")
            emailValid = true
        }
    
        var passwordValid = false;
        if(password.length == 0){
            setPasswordError("Password is required");
        }        
        else if(password.length < 6){
            setPasswordError("Password should be minimum 6 characters");
        }      
        else if(password.indexOf(' ') >= 0){        
            setPasswordError('Password cannot contain spaces');                          
        }    
        else{
            setPasswordError("")
            passwordValid = true
        }        
    
        if(emailValid && passwordValid){            
            alert('Email: ' + email + '\nPassword: ' + password); 
            setEmail("");
            setPassword("");
        }        
    
      }
    return (
        <View>
            <View>
                <View>
                    <TextInput placeholder="Enter Email" onChangeText={text => setEmail(text)} value={email} />
                </View>
                {emailError.length > 0 &&
                  <Text>{emailError}</Text>
                }
                <View>
                    <TextInput placeholder="Enter Password" onChangeText={text => setPassword(text)} value={password} />
                </View>
                {passwordError.length > 0 &&
            
                  <Text>{passwordError}</Text>
                }
                <Button onPress={handleSubmit} title='submit' />
</View>
            <View>
                <Text>
                Email entered: {email}            
                </Text>
                <Text>            
                Password entered: {password}
                </Text>        
            </View>
            
        </View>
    )
}
export default FormList

Сначала мы импортируем все необходимые компоненты из соответствующих зависимостей. Мы установили четыре хука useState для полей электронной почты и пароля. Здесь они изменят свое начальное состояние, поэтому мы используем концепцию React Hook. Мы устанавливаем их начальное состояние как пустое, потому что мы хотим, чтобы пользователи заполняли информацию в данном поле.

Теперь в функции стрелки отправки дескриптора мы устанавливаем две переменные, одну для электронной почты и одну для пароля. Если пользователь оставит поле электронной почты пустым в поле электронной почты, появится сообщение «Требуется электронная почта». Если пользователь ставит пробелы между своими адресами электронной почты, приложение покажет «Электронная почта не может содержать пробелов». То же самое и с полем пароля. Теперь у вас есть небольшое представление о том, как все это работает. Теперь, если вы хотите установить особый вид ошибки, вы можете установить ее таким образом.

После всего этого мы просто возвращаем форму в виде простейшего UI. Потому что вы можете настроить пользовательский интерфейс. Важная часть - это концепция. Мы показываем на экране, возникает ли какая-либо ошибка формы проверки.

Сохраните FormList.js и импортируйте его в App.js. Что-то вроде этого.

App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import FormList from './FormList';
export default function App() {
  return (
    <View style={styles.container}>
      <FormList/>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Сохраните App.js и запустите это приложение в терминале или в окне командной строки с помощью команды: npm start

Отсканируйте QR-код со своих устройств IOS или Android. Этот проект будет работать без сбоев на обоих устройствах, и вы сможете увидеть его в действии.

Спасибо.