Formik验证异常：Email输入未被校验问题求助

问题描述 #

搭建Formik学习用App时，发现Yup的LoginSchema中，Password的校验规则能正常触发，但Email的校验完全没效果，即使添加更多规则也不生效。

相关代码 #

LoginSchema.js #

import * as Yup from 'yup';

const LoginSchema = Yup.object().shape({
    email: Yup.string().email('Invalid email').required('Required'),
    password: Yup.string()
        .min(2, 'Too Short!')
        .max(10, 'Too Long!')
        .required('Required')
});

export default LoginSchema;

Login.js #

import React, { useRef } from 'react';
import { Text, View } from 'react-native';
import { useFormik } from 'formik';

import TextInput from '../components/TextInput';
import Button from '../components/Button';
import LoginSchema from '../schema/LoginSchema'

export default function Login() {
  const password = useRef(null);
  const { handleChange, handleSubmit, handleBlur, values, errors, touched } = useFormik({
    validationSchema: LoginSchema,
    initialValues: { email: '', password: '' },
    onSubmit: values =>
      alert(`Email: ${values.email}, Password: ${values.password}`)
  });
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
      }}
    >
      <Text style={{ color: '#223e4b', fontSize: 20, marginBottom: 16 }}>
        Login
      </Text>
      <View style={{ paddingHorizontal: 32, marginBottom: 16, width: '100%' }}>
        <TextInput
          icon='mail'
          placeholder='Enter your email'
          onChangeText={handleChange('email')}
          onBlur={handleBlur('email')}
          onSubmitEditing={() => password.current?.focus()}
          errors={errors.email}
          touched={touched.email}
          autoCapitalize='none'
          autoCompleteType='email'
          keyboardType='email-address'
          keyboardAppearance='dark'
          returnKeyType='next'
          returnKeyLabel='next'
        />
      </View>
      <View style={{ paddingHorizontal: 32, marginBottom: 16, width: '100%' }}>
        <TextInput
          ref={password}
          icon='key'
          placeholder='Enter your password'
          onChangeText={handleChange('password')}
          onBlur={handleBlur('password')}
          onSubmitEditing={() => handleSubmit()}
          error={errors.password}
          touched={touched.password}
          secureTextEntry
          autoCompleteType='password'
          autoCapitalize='none'
          keyboardAppearance='dark'
          returnKeyType='go'
          returnKeyLabel='go'
        />
      </View>
      <Button label='Login' onPress={handleSubmit} />
    </View>
  );
}

问题排查与解决 #

核心问题是自定义TextInput组件的属性名传递错误：

• Email输入框传递的错误属性是errors={errors.email}（复数形式）
• Password输入框传递的是error={errors.password}（单数形式）

自定义TextInput组件应该是接收单数error属性来展示错误信息，因此Email的错误信息未被组件接收，导致看起来校验没生效。

修改Email输入框的属性名，把errors={errors.email}改成error={errors.email}即可：

<TextInput
  icon='mail'
  placeholder='Enter your email'
  onChangeText={handleChange('email')}
  onBlur={handleBlur('email')}
  onSubmitEditing={() => password.current?.focus()}
  error={errors.email} {/* 修改为单数error */}
  touched={touched.email}
  autoCapitalize='none'
  autoCompleteType='email'
  keyboardType='email-address'
  keyboardAppearance='dark'
  returnKeyType='next'
  returnKeyLabel='next'
/>

修改后，Email的校验规则就能正常触发并展示错误提示了。

内容的提问来源于stack exchange，提问作者Caroline Lacerda