我在我的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'),
});
我只需要在表单提交时触发验证并显示错误弹出窗口。我已经阅读了文档,但是找不到解决方案,因为验证会触发onBlur。该怎么办?
谢谢!
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;
答案 0 :(得分:9)
是的。你可以做这样的事情。
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
validateOnChange={false}
validateOnBlur={false}
onSubmit={(values, { validate }) => {
validate(values);
}}
>
答案 1 :(得分:1)
检查docs
您可以根据需要通过更改
<Formik validateOnChange>
和/或<Formik validateOnBlur>
道具的值来控制Formik何时运行验证。默认情况下,Formik将运行验证方法,如下所示:
将道具Formik
和validateOnChange={false}
传递给您的validateOnBlur={false}