Formik + Yup 表单验证实战
Formik 如何管理表单状态和验证?Yup schema 验证规则如何编写?如何处理异步验证(如检查用户名唯一性)?Formik 的 setFieldError/setSubmitting/setStatus 的用途?
回答
孤独的心
useFormik({initialValues:{}, validationSchema:Yup.object({name:Yup.string().required('必填').min(2), email:Yup.string().email()}), onSubmit:async(values,{setSubmitting,setFieldError})=>{try{await api.register(values)}catch(err){setFieldError('email','已存在')}finally{setSubmitting(false)}}})。异步验证: Yup.string().test('unique','已被注册',async(v)=>{return await checkUnique(v)})。setFieldError 设字段错误;setSubmitting 提交状态;setStatus 设状态消息。abortEarly:false 一次性显示所有错误。