React Hook 양식 및 yup 유효성 검사: 효과적인 양식 유효성 검사 방법

Question

React JS 전자상거래 웹사이트를 위한 Buy Now 구성요소를 만들었습니다. 내가 직면한 문제는 양식 유효성 검사가 완료되지 않았다는 것입니다. 파서를 사용했지만 여전히 내 양식의 유효성을 검사하지 못했습니다.这是我的代码：

'react'에서 React, { useEffect, useState } 가져오기
가져오기 "./e.css"
"react-hook-form"에서 import { useForm }을;;
"@hookform/resolvers/yup"에서 { yupResolver }를 가져옵니다.
"yup"에서 *를 yup으로 가져옵니다.

기본 함수 BuyNow(props) { 내보내기
    const [국가, setCountry] = useState([])
    useEffect(() => {

        const getcountry = async () => {
            const res = 가져오기를 기다립니다("http://localhost:3000/setpk.json")
            const getcon = res.json()을 기다립니다.

            setCountry(getcon 대기)
        }
        getcountry()

    }, [])


    const 스키마 = yup.object({
        전체 이름: yup.string().required(),
        이메일: yup.string().email().required(),
        주소: yup.string().required(),
        전화번호: yup.number().required().integer().min(11),
        도시: yup.string().required(),
        결제: yup.string().required()

    })
    const { 등록, handlerSubmit, 감시, formState: { 오류 } } = useForm({
        리졸버: yupResolver(스키마)
    });

    const onSubmit = (데이터) => {

        console.log(데이터)

    }



    반품 (



        <>
            <div className="세부정보 h-[90vh] bg-indigo-600 mt-20 text-indigo-400 text-center">
                <h1 className='text-indigo-200'>立即购买</h1>
                <onSubmit={handleSubmit(onSubmit)}>
                    <div className='space-y-5 mt-4 flex flex-col w-[70%] sm:w-[66%] md:w-[55%] mx-auto'>

                        <입력 이름="이름" id="이름" placeholder='이름' {...register("전체 이름")
                        } />

                        <입력 이름="이메일" id="이메일" placeholder='电子邮件' className="text-indigo-400 "
                            {...등록("이메일")
                            } />


                        <입력 이름="주소" id="주소" placeholder='送货地址' {...register("주소")
                        } />
                        <입력 유형="숫자" 이름="전화" 아이디="" placeholder='电话号码' {...register("phoneno")
                        } />
                        <이름 선택="sa" id="as" {...등록("도시")
                        }>

                            <옵션 비활성화됨 선택됨 >--도시명칭--</option>
                            {
                                country.map((countryget, i) => (
                                    <옵션 키={i} >{countryget.city}</option>
                                ))
                            }


                        </선택>
                        <div className='flexrelative w-auto'>
                            <이름 선택="" 아이디="" className='thepay based-full w-[70%] ' {...register("결제")
                            }>

                                <옵션 비활성화됨 선택됨> --付款方式-- </option>
                                <옵션>信用卡</option>
                                <옵션>货到付款</option>
                                <옵션>银行转账</option>
                            </선택>
                            <img src="http://localhost:3000/creditcard.png" alt="" className='절대 w-10 오른쪽-5' />
                        </div>

                        {/* <버튼 유형="제출" className='bg-indigo-600 p-2 rounded-lg 글꼴-모노 절대값 '>진행 ➔</button> */}

                    </div>
                    <입력 유형="제출" className='bg-rose-600 p-2 rounded-lg 글꼴-모노 텍스트-흰색 mt-3' />
                    </양식>
            </div>



            <div className="가격 섹션 h-20 bg-rose-600 고정 하단-0 왼쪽-0 오른쪽-0 플렉스 항목-센터 px-1 텍스트-로즈-100 justify-evenly md:justify-around>

                <h2 className='text-xl md:text-2xl md:font-bold '>总价</h2>

                <h2 className='text-2xlfont-bold'>${props.totalprice}</h2>



            </div>


        </>
    )
}

저는 제 생각에 맞지 않습니다.

Answer 1

yup.integer()를 yup.string()으로 대체하여 이 문제를 해결했습니다

phoneno: yup.number().required().integer().min(11),