如何解决如何在外部包中创建可重用的yup.test
感谢您提前提出建议。
下面的代码只是实际代码的非常简化的版本。
目标
使用从外部包导入的yup.test。
原因是我有多个应用程序,其中一些应用程序比其他应用程序具有更多的验证要求。
问题
我尝试了几种不同的方法,以下是我尝试过的最新模式。无论哪种方式,我都没有找到连接这两部分的方法。
这就是我所拥有的
App.js-在主应用程序中
import React from 'react';
import * as Yup from 'yup';
import { isFiveCharacters } from '@reusables/yupTests'
export default function App() {
const validationSchema = () => {
let yup = Yup.object();
//Add additional validation for the zipCode field
isFiveCharacters();
yup.shape({
zipCode: Yup.string().required('You must enter a zipcode').isFiveCharacters('zipCode')
});
return yup;
}
return (
<Formik
initialValues={{zipCode: ''}}
validationSchema={validationSchema}
onSubmit={() => {console.log('Do nothing,for now');}}
>
{({ values,errors,touched,handleChange,handleBlur }) => {
return (
<Form>
<input
name='zipCode'
type='text'
placeholder='Ex. 46051'
value={values.zipCode}
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.zipCode && touched.zipCode && (
<div className='error-feedback'>{errors.zipCode}</div>
)}
</Form>
)
}}
</Formik>
)
}
yupTests.js-在@reusables包中
const isFiveCharacters = () => {
Yup.addMethod(Yup.string,'isFiveCharacters',function (fieldName) {
return this.test(fieldName,'Must be 5 characters long',function (zipCode) {
//This needs to stay .test because the code in the actual package is much larger
return zipCode.length === 5;
})
});
}
export { isFiveCharacters }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。