我在我的React Native应用程序中使用Formik。在登录表单上,我有两个字段:电子邮件和密码,它们都是必填的。
我编写了以下验证规则:
export const LoginSchema = Yup.object().shape({
email: Yup.string()
.email('The email is invalid')
.required('This field is required'),
password: Yup.string()
.min(6, 'The password is too short')
.max(12, 'The password is too long')
.required('This field is required'),
});
我需要在表单提交时仅触发验证并显示错误弹出窗口。我已经阅读了文档,但找不到解决方案,因为验证会在失焦事件上触发。应该如何实现?
谢谢!
const Login = ({ navigation }) => {
const [isLoading, setIsLoading] = useState(true);
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
// Later check for token
const tokenIsStored = true;
if (tokenIsStored) {
setIsLoading(false);
}
});
const onLogin = values => {
console.log(values, 'on login');
// Pass value to BE endpoint
navigation.navigate('Dashboard');
};
const onModalClose = () => {
setIsVisible(false);
};
console.log(isVisible);
if (!isLoading) {
return (
<ScrollContainer keyboardShouldPersistTaps="handled">
<ThemedStatusBar />
<ThemedModal
isVisible={isVisible}
primaryMessage="Log In Failed"
secondaryMessage="Please check your password"
btnTitle="OK"
btnPress={() => onModalClose()}
/>
<Formik
initialValues={{ email: '', password: '' }}
validationSchema={LoginSchema}
onSubmit={values => onLogin(values)}
>
{props => (
<View>
<ScrollContainer BackgroundColor={Colors.greyColor} Padding="0px" style={styles.loginForm}>
<ThemedInput
onChangeText={props.handleChange('email')}
onBlur={props.handleBlur('email')}
value={props.values.email}
placeholder="Email"
keyboardType="email-address"
/>
<ThemedInput
onChangeText={props.handleChange('password')}
onBlur={props.handleBlur('password')}
value={props.values.password}
placeholder="Password"
overrideStyles={styles.loginInputBottom}
secureTextEntry
/>
{props.errors.email && setIsVisible(true)}
</ScrollContainer>
<ThemedButton onPress={props.handleSubmit} title="Log In" />
</View>
)}
</Formik>
</ScrollContainer>
);
}
return <ThemedLoader isLoading />;
};
export default Login;