Borang React Hook dan pengesahan yup: kaedah pengesahan borang yang berkesan

Question

Saya mencipta komponen Beli Sekarang untuk tapak web e-dagang React JS saya. Masalah yang saya hadapi ialah pengesahan borang tidak lengkap. Saya menggunakan penghurai tetapi ia masih tidak mengesahkan borang saya.这是我的代码：

import React, { useEffect, useState } daripada 'react'
import "./e.css"
import { useForm } daripada "react-hook-form";
import { yupResolver } daripada "@hookform/resolvers/yup"
import * sebagai yup daripada "yup"

eksport fungsi lalai BuyNow(props) {
    const [negara, setCountry] = useState([])
    useEffect(() => {

        const getcountry = async () => {
            const res = tunggu ambil("http://localhost:3000/setpk.json")
            const getcon = menunggu res.json()

            setCountry(menunggu getcon)
        }
        getcountry()

    }, [])


    skema const = yup.object({
        nama penuh: yup.string().required(),
        e-mel: yup.string().email().required(),
        alamat: yup.string().required(),
        phoneno: yup.number().diperlukan().integer().min(11),
        bandar: yup.string().required(),
        pembayaran: yup.string().required()

    })
    const { register, handleSubmit, watch, formState: { errors } } = useForm({
        penyelesai: yupResolver(skema)
    });

    const onSubmit = (data) => {

        console.log(data)

    }



    kembali (



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

                        <nama input="nama tersebut" id="nama" pemegang tempat='姓名' {...daftar("nama penuh")
                        } />

                        <nama input="e-mel" id="e-mel" pemegang tempat='电子邮件' className="teks-indigo-400 "
                            {...daftar("e-mel")
                            } />


                        <nama input="alamat" id="alamat" pemegang tempat='送货地址' {...daftar("alamat")
                        } />
                        <jenis input="nombor" nama="telefon" id="" pemegang tempat='电话号码' {...daftar("nombor telefon")
                        } />
                        <pilih nama="sa" id="sebagai" {...daftar("bandar")
                        }>

                            <pilihan dilumpuhkan dipilih >--城市名称--</option>
                            {
                                country.map((countryget, i) => (
                                    <kunci pilihan={i} >{countryget.city}</option>
                                ))
                            }


                        </select>
                        <div className='flex relatif w-auto'>
                            <pilih nama="" id="" className='thepayment basis-full w-[70%] ' {...register("payment")
                            }>

                                <pilihan dilumpuhkan dipilih > --付款方式-- </option>
                                <pilihan >信用卡</option>
                                <pilihan >货到付款</option>
                                <pilihan >银行转账</option>
                            </select>
                            <img src="http://localhost:3000/creditcard.png" alt="" className='mutlak w-10 kanan-5' />
                        </div>

                        {/* <jenis butang="serahkan" className='bg-indigo-600 p-2 bulat-lg font-mono mutlak '>Teruskan ➔</button> */}

                    </div>
                    <jenis input="serahkan" className='bg-rose-600 p-2 rounded-lg font-mono text-white mt-3' />
                    </form>
            </div>



            <div className="pricesection h-20 bg-rose-600 tetap bawah-0 kiri-0 kanan-0 flex item-center px-1 text-rose-100 justify-evenly md:justify-around">

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

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



            </div>


        </>
    )
}

我希望表单是不受控制的。我编写了模式并使用了解析器。

Answer 1

Saya menyelesaikan masalah ini dengan menggantikan yup.integer() dengan yup.string()

no telefon: yup.number().diperlukan().integer().min(11),