React Native 中的验证

Question

错误： 对电子邮件字段进行验证时出现错误，第一次工作正常，但第二次在错误字段中没有任何显示。

我使用 react-native 创建了一个登录表单，我想验证每个字段，但我不知道该怎么做。我对 react-native 很陌生，所以我想向任何人寻求帮助。在以下情况下，表单验证应显示错误：

输入表单为空
电子邮件文本不是电子邮件形式。
密码文字不满足以上条件
如果输入表单有错误，则应禁用登录按钮。
如果输入表单没有任何错误，则显示警报以通知登录成功

import React, { useState } from "react";
import {
  Avatar,
  Center,
  Image,
  Text,
  Input,
  Icon,
  Button,
  Stack,
  Checkbox,
  Divider,
  Flex,
} from "native-base";
import { LinearGradient } from "expo-linear-gradient";
import { AntDesign } from "@expo/vector-icons";
import { Entypo } from "@expo/vector-icons";
import { Feather } from "@expo/vector-icons";

const Main = () => {
  const [state, setState] = useState({
    email: "",
    emailError: "",
    password: "",
  });
  const emailValidator = () => {
    if (state.email == "") {
      setState({ emailError: "Email Field canot be empty" });
    } else {
      setState({ emailError: "" });
    }
  };
  return (
    <LinearGradient height="100%" colors={["#4c669f", "#3b5998", "#192f6a"]}>
      <View>
        <Center>
          <Image
            source={require("../../assets/man.png")}
            alt="Logo"
            style={styles.image}
          />
          <Text fontSize="4xl" style={styles.title}>
            Login Form
          </Text>

          <Input
            placeholder="Email"
            onChangeText={(text) => {
              setState({ password: text });
            }}
            onBlur={() => emailValidator()}
            variant="rounded"
            marginX={10}
            marginY={5}
            InputLeftElement={
              <Icon
                as={<AntDesign name="user" size={24} />}
                size={5}
                ml="2"
                color="red.900"
              />
            }
          />
          <Text style={styles.error}>{state.emailError}</Text>
          <Input
            placeholder="Password"
            secureTextEntry={true}
            onChangeText={(text) => {
              setState({ email: text });
            }}
            variant="rounded"
            marginX={10}
            InputLeftElement={
              <Icon
                as={<Entypo name="lock-open" size={24} />}
                size={5}
                ml="2"
                color="red.900"
              />
            }
          />
          <Button
            colorScheme="primary"
            mt={7}
            fontSize={20}
            size="lg"
            onPress={() => {
              console.log("hello");
            }}
          >
            Login
          </Button>
        </Center>
        <Center>
          <Stack direction="row" space="2" mt={6}>
            <Checkbox size="sm" color="blue.50">
              <Text fontSize="md" style={{ color: "white" }}>
                Remember Password
              </Text>
            </Checkbox>
            <Text fontSize="md" ml={10} style={styles.forget}>
              Forget Password
            </Text>
          </Stack>
          <Divider mt={5} width={350} />

          <Text style={{ paddingTop: 10, fontWeight: "bold", color: "white" }}>
            If you don't Have an accout ?
          </Text>
          <TouchableOpacity style={styles.areadyButton}>
            <Text style={styles.alreadyText}>Create An Account</Text>
          </TouchableOpacity>
          <Divider w={290} bg="indigo.500" thickness={4} />
          <Text fontSize="md" style={styles.other}>
            Or Login With
          </Text>
          <Flex direction="row" h="58" p="4">
            <TouchableOpacity>
              <AntDesign name="google" size={25} color="red" />
            </TouchableOpacity>
            <Divider
              bg="emerald.500"
              thickness="5"
              mx="3"
              orientation="vertical"
            />
            <TouchableOpacity>
              <Feather name="facebook" size={25} color="white" />
            </TouchableOpacity>
            <Divider
              bg="indigo.500"
              thickness="5"
              mx="3"
              orientation="vertical"
            />
            <TouchableOpacity>
              <Feather name="twitter" size={25} color="blue" />
            </TouchableOpacity>
          </Flex>
        </Center>
      </View>
    </LinearGradient>
  );
};

export default Main;

const styles = StyleSheet.create({
  image: {
    height: 110,
    width: 110,
    borderRadius: 100,
    marginTop: 25,
  },
  title: {
    paddingTop: 10,
    fontWeight: "bold",
  },
  areadyButton: {
    marginVertical: 20,
  },
  alreadyText: {
    padding: 15,
    paddingLeft: 30,
    paddingRight: 30,
    fontSize: 15,
    fontWeight: "bold",
    borderWidth: 1,
    borderColor: "white",
    color: "#397eed",
    borderRadius: 35,
  },
  createAccountButton: {
    marginTop: 30,
  },
  createAccountText: {
    color: "white",
    fontSize: 19,
  },
  texts: {
    color: "white",
  },
  forget: {
    color: "white",
  },
  other: {
    paddingVertical: 10,
    color: "white",
    fontWeight: "bold",
    color: "orange",
  },
  error: {
    color: "red",
  },
});

Answer 1

您已经拥有 emailValidator 功能，是什么阻止您对密码等执行相同的操作？要禁用提交按钮，您可以向其添加一个 CSS class 作为状态，并在输入有效后更改它。

例如，对于电子邮件，您可以使用 state.mail.includes("@") 等

例如，可以通过添加动态 CSS 状态来完成按钮更改，并且可以在每次检查结束时实施警报。

Answer 2

检查以下代码或https://snack.expo.dev/jccB3ldkt

import React, { useState } from "react";
import { View, StyleSheet, TouchableOpacity } from "react-native";

import {
  Avatar,
  Center,
  Image,
  Text,
  Input,
  Icon,
  Button,
  Stack,
  Checkbox,
  Divider,
  Flex,
  NativeBaseProvider
} from "native-base";
import { LinearGradient } from "expo-linear-gradient";
import { AntDesign } from "@expo/vector-icons";
import { Entypo } from "@expo/vector-icons";
import { Feather } from "@expo/vector-icons";

const Main = () => {
  const [state, setState] = useState({
    email: "",
    emailError: "",
    password: "",
  });
  const emailValidator = () => {
    if (state.email == "") {
      setState({...state, emailError: "Email Field canot be empty" });
    } else {
      setState({...state, emailError: "" });
    }
  };
  return (
    <NativeBaseProvider> 
    <LinearGradient height="100%" colors={["#4c669f", "#3b5998", "#192f6a"]}>
      <View>
        <Center>
          <Image
            source={''}
            alt="Logo"
            style={styles.image}
          />
          <Text fontSize="4xl" style={styles.title}>
            Login Form
          </Text>

          <Input
            placeholder="Email"
            onChangeText={(text) => {
              setState({ email: text });
            }}
            onBlur={() => emailValidator()}
            variant="rounded"
            marginX={10}
            marginY={5}
            InputLeftElement={
              <Icon
                as={<AntDesign name="user" size={24} />}
                size={5}
                ml="2"
                color="red.900"
              />
            }
          />
          <Text style={styles.error}>{state.emailError}</Text>
          <Input
            placeholder="Password"
            secureTextEntry={true}
            onChangeText={(text) => {
              setState({ password: text });
            }}
            variant="rounded"
            marginX={10}
            InputLeftElement={
              <Icon
                as={<Entypo name="lock-open" size={24} />}
                size={5}
                ml="2"
                color="red.900"
              />
            }
          />
          <Button
            colorScheme="primary"
            mt={7}
            fontSize={20}
            size="lg"
            onPress={() => {
              console.log("hello");
            }}
          >
            Login
          </Button>
        </Center>
        <Center>
          <Stack direction="row" space="2" mt={6}>
            <Checkbox size="sm" color="blue.50">
              <Text fontSize="md" style={{ color: "white" }}>
                Remember Password
              </Text>
            </Checkbox>
            <Text fontSize="md" ml={10} style={styles.forget}>
              Forget Password
            </Text>
          </Stack>
          <Divider mt={5} width={350} />

          <Text style={{ paddingTop: 10, fontWeight: "bold", color: "white" }}>
            If you don't Have an accout ?
          </Text>
          <TouchableOpacity style={styles.areadyButton}>
            <Text style={styles.alreadyText}>Create An Account</Text>
          </TouchableOpacity>
          <Divider w={290} bg="indigo.500" thickness={4} />
          <Text fontSize="md" style={styles.other}>
            Or Login With
          </Text>
          <Flex direction="row" h="58" p="4">
            <TouchableOpacity>
              <AntDesign name="google" size={25} color="red" />
            </TouchableOpacity>
            <Divider
              bg="emerald.500"
              thickness="5"
              mx="3"
              orientation="vertical"
            />
            <TouchableOpacity>
              <Feather name="facebook" size={25} color="white" />
            </TouchableOpacity>
            <Divider
              bg="indigo.500"
              thickness="5"
              mx="3"
              orientation="vertical"
            />
            <TouchableOpacity>
              <Feather name="twitter" size={25} color="blue" />
            </TouchableOpacity>
          </Flex>
        </Center>
      </View>
    </LinearGradient>
    </NativeBaseProvider>
  );
};

export default Main;

const styles = StyleSheet.create({
  image: {
    height: 110,
    width: 110,
    borderRadius: 100,
    marginTop: 25,
  },
  title: {
    paddingTop: 10,
    fontWeight: "bold",
  },
  areadyButton: {
    marginVertical: 20,
  },
  alreadyText: {
    padding: 15,
    paddingLeft: 30,
    paddingRight: 30,
    fontSize: 15,
    fontWeight: "bold",
    borderWidth: 1,
    borderColor: "white",
    color: "#397eed",
    borderRadius: 35,
  },
  createAccountButton: {
    marginTop: 30,
  },
  createAccountText: {
    color: "white",
    fontSize: 19,
  },
  texts: {
    color: "white",
  },
  forget: {
    color: "white",
  },
  other: {
    paddingVertical: 10,
    color: "white",
    fontWeight: "bold",
    color: "orange",
  },
  error: {
    color: "red",
  },
});

React Native 中的验证

Validation in React Native

react-native