yup-phone을 사용한 빈 전화번호 필드 검증

최근에 라이브러리를 사용하는 동안 문제가 발생했습니다yup-phone.

yup-phone은 양식 필드에 입력된 전화번호를 검증하는 데 사용할 수 있는 react-library입니다. google-libphonenumber를 사용하여 입력 필드에 지정된 전화번호의 유효성을 검사합니다.

yup-phone의 샘플 사용법은 다음과 같습니다.

const validationSchema = Yup.object().shape({
    mobile: Yup.string().phone()
})

위의 스키마는 주어진 번호가 유효한 전화번호 형식인지 여부를 확인합니다. official page에서 사용법에 대해 자세히 읽을 수 있습니다.

위 스니펫의 문제점은 필수가 아닌 경우에도 전화번호를 제공하도록 양식 제출을 의무화한다는 것입니다. 필드가 비어 있는 경우 빈 필드에 대해 유효성 검사가 수행됩니다. 예 방법optional 및 notRequired도 작동하지 않았습니다. (참고: 이 오류는 이 게시물을 작성하는 시점에서 yup-phone으로 해결되지 않습니다. 문제를 추적하려면 공식 페이지를 확인하십시오.)

빈 필드 유효성 검사를 수정하는 해결 방법은 다음과 같습니다.

const validationSchema = Yup.object().shape({
        mobile: Yup.string().when('mobile', {
            is: (value) => value?.length > 0,
            then: Yup.string().phone(),
            otherwise: Yup.string(),
        }),
    },
    [
        ['mobile', 'mobile']
    ]
)

모바일 속성은 종속성 목록에 두 번 기록됩니다. 이는 StackOverflowpost에 설명된 대로 순환 종속성 오류를 방지하기 위한 것입니다.

다음은 여러 전화번호 필드에 대한 코드 스니펫입니다.

const validationSchema = Yup.object().shape({
        mobile: Yup.string().when('mobile', {
            is: (value) => value?.length > 0,
            then: Yup.string().phone(),
            otherwise: Yup.string(),
        }),
        phone: Yup.string().when('phone', {
            is: (value) => value?.length > 0,
            then: Yup.string().phone(),
            otherwise: Yup.string(),
        }),
    },
    [
        ['mobile', 'mobile'],
        ['phone', 'phone']
    ]
)

엽폰 공식 페이지: https://github.com/abhisekp/yup-phone

문제: https://github.com/abhisekp/yup-phone/issues/313