React Native 表单验证方法论

Question

我是 React Native 的新手。我正在尝试使用一些自定义表单验证方法创建一个功能齐全的登录屏幕。由于 react 中的 setState 方法是异步的，因此我现在正在准备表单验证。看到我下面的代码，有人可以推荐我最好的做法是什么吗？

我想要如下所述的用户旅程

用户输入 his/her 电子邮件地址和密码，当他们单击注册按钮时，我将验证输入，如果有错误，我将设置我的错误并显示错误消息。如果我的状态等于空字符串，这意味着没有验证错误，我可以继续我的操作。以下是完整的注册屏幕代码

import React, {useState, useEffect} from 'react';
import {
  Container,
  Content,
  H1,
  Form,
  Item,
  Label,
  Input,
  Button,
  Text,
  Icon,
} from 'native-base';
import {globalStyles} from '../../helper/globalStyles';
import {
  vaidateEmailAddress,
  validatePassword,
} from '../../helper/validationfunctions';

const RegisterScreen = ({navigation}) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const [emailInputError, setEmailInputError] = useState(null);
  const [emailInputErrorMessage, setEmailInputErrorMessage] = useState('');

  const [passwordInputError, setPasswordInputError] = useState(null);
  const [passwordInputErrorMessage, setPasswordInputErrorMessage] = useState(
    '',
  );

  return (
    <Container style={globalStyles.container}>
      <Content contentContainerStyle={globalStyles.content}>
        <H1>Register</H1>
        <H1 />
        <Form>
          <Item error={emailInputError} style={globalStyles.item}>
            <Label>Email</Label>
            <Input
              onChangeText={text => {
                setEmail(text);
              }}
            />
          </Item>
          {emailInputError && (
            <Item style={globalStyles.erroritem}>
              <Icon name="ios-close-circle" style={{color: 'red'}} />
              <Text style={globalStyles.erroritemText}>
                {emailInputErrorMessage}
              </Text>
            </Item>
          )}
          <Item error={passwordInputError} style={globalStyles.item}>
            <Label style={globalStyles.labelText}>Password</Label>
            <Input
              style={globalStyles.input}
              onChangeText={text => {
                setPassword(text);
              }}
            />
          </Item>

          {passwordInputError && (
            <Item style={globalStyles.erroritem}>
              <Icon name="ios-close-circle" style={{color: 'red'}} />
              <Text style={globalStyles.erroritemText}>
                {passwordInputErrorMessage}
              </Text>
            </Item>
          )}

          <Item style={(globalStyles.item, globalStyles.lastItem)} last>
            <Button
              onPress={() => {
                //First Validate Empty Field
                if (
                  email === '' ||
                  email === null ||
                  !vaidateEmailAddress(email)
                ) {
                  setEmailInputError('error');
                  console.log('Value changed' + emailInputError);
                  setEmailInputErrorMessage(
                    'The email you provided is not a valid email address',
                  );

                  console.log(email === '');
                  console.log(email === null);
                  console.log(vaidateEmailAddress(email));
                }
                if (
                  password === '' ||
                  password === null ||
                  !validatePassword(password)
                ) {
                  setPasswordInputError('error');
                  setPasswordInputErrorMessage(
                    'The password you provided is not a valid password',
                  );
                }
                setTimeout(() => {
                  if (emailInputError === null && passwordInputError === null) {
                    console.log(
                      'Email: ' +
                        emailInputError +
                        ' Password: ' +
                        passwordInputError +
                        ' I am fired',
                    );
                    // TODO: Add firebase code
                  }
                }, 100);

                navigation.navigate('RegisterScreen');
              }}>
              <Text>Signup</Text>
            </Button>
          </Item>

          <Item style={(globalStyles.item, globalStyles.lastItem)} last>
            <Button
              bordered
              onPress={() => {
                navigation.pop();
              }}>
              <Text>Go Back</Text>
            </Button>
          </Item>
        </Form>
      </Content>
    </Container>
  );
};

export default RegisterScreen;

Answer 1

编写和验证表单可能很痛苦:( 我建议使用第三方库让您的生活更轻松。 React Native 最好的库之一是 Formik。您可以找到 React Native 集成的文档 here.

React Native 表单验证方法论

React Native Form Validation Methodology

reactjs

react-native

react-native-android