Question

我已经使用formik和yup（表单验证）在react native中创建了一个简单的登录表单。登录表单仅包含一个电子邮件字段和一个密码字段。电子邮件字段的验证工作正常。当密码的长度小于4时，将显示密码字段的验证。但是，当我输入包含7个字符的冗长密码时，屏幕上仍会显示验证错误消息。

请帮助我解决这个问题。

这是登录屏幕

import React, { Component } from "react";
import { StyleSheet, Image, View } from "react-native";

import Screen from "../components/Screen";
import AppTextInput from "../components/AppTextInput";
import AppButton from "../components/App/AppButton";
import AppText from "../components/AppText";
import ErrorMessage from "../components/ErrorMessage";

import { Formik, yupToFormErrors } from "formik"; // import formik
import * as Yup from "yup"; // import yup
import Colors from "../config/Color";

const LoginvalidationSchema = Yup.object().shape({
  email: Yup.string().required().email("Email"),
  password: Yup.string().required().min(4).label("Password")
});

const LoginScreen = () => {
  return (
    <Screen style={styles.container}>
      <Image style={styles.logo} source={require("../assets/logo-red.png")} />

      <Formik
        initialValues={{ email: "", password: "" }}
        onSubmit={(values) => console.log(values)}
        validationSchema={LoginvalidationSchema}
      >
        {({ handleChange, handleSubmit, errors, setFieldTouched }) => (
          <React.Fragment>
            <AppTextInput
              autoCapitalize="none"
              autoCorrect={false}
              icon="email"
              placeholder="Enter E-mail"
              keybordType="email-address"
              textContentType="emailAddress" // only works on iOS - textContentType
              onChangeText={handleChange("email")}
            />

            <ErrorMessage error={errors.email} />

            <AppTextInput
              autoCapitalize="none"
              autoCorrect={false}
              icon="lock"
              placeholder="Enter Password"
              textContentType="password"
              secureTextEntry={true}
              onChangetext={handleChange("password")}
            />

            <ErrorMessage error={errors.password} />
            <AppButton
              title="Login"
              onPress={handleSubmit}
              color={Colors.primary}
            />
            <AppButton
              title="Register"
              onPress={() => {
                alert("Register pressed");
              }}
              color={Colors.secondary}
            />
          </React.Fragment>
        )}
      </Formik>
    </Screen>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
  logo: {
    width: 80,
    height: 80,
    alignSelf: "center",
    marginTop: 50,
    marginBottom: 20,
  },
});

export default LoginScreen;

这是错误消息组件，它显示错误消息

import React, { Component } from "react";
import { StyleSheet } from "react-native";

import AppText from "./AppText";
import Colors from "../config/Color";

const ErrorMessage = (props) => {
  if (!props.error) return null;
  return <AppText style={styles.error}>{props.error}</AppText>;
};

const styles = StyleSheet.create({
  error: {
    color: Colors.red,
  },
});

export default ErrorMessage;

这是应用程序文本组件

import React, { Component } from "react";
import { StyleSheet, Platform, Text } from "react-native";

import Colors from '../config/Color';
import defaultStyles from '../config/Style'

const AppText = ({children, style}) => {

  return <Text style={[styles.text, style]}>{children}</Text>;
};

const styles = StyleSheet.create({
  text: {
    color: Colors.black,
    fontSize:18,
    ...Platform.select({
      ios: {
        fontFamily: "Avenir",
      },
      android: {
        fontFamily: "Roboto",
      },
    }),
  },
});

export default AppText;

请注意，我使用的是Formik 2.1.4版和yup 0.29.1版

请足够帮助我解决此问题。

预先感谢， Yohan

React本机表单验证不适用于yup

0 个答案: