React Hook-Formular und Yup-Validierung: effektive Methode zur Formularvalidierung

Question

Ich habe eine „Jetzt kaufen“-Komponente für meine React JS-E-Commerce-Website erstellt. Das Problem, mit dem ich konfrontiert bin, besteht darin, dass die Validierung des Formulars nicht abgeschlossen ist. Ich habe einen Parser verwendet, aber er hat mein Formular immer noch nicht validiert.这是我的代码：

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

Standardfunktion exportieren BuyNow(props) {
    const [Land, setCountry] = useState([])
    useEffect(() => {

        const getcountry = async () => {
            const res = waiting fetch("http://localhost:3000/setpk.json")
            const getcon = Warten auf res.json()

            setCountry(warte auf getcon)
        }
        getcountry()

    }, [])


    const schema = yup.object({
        Vollständiger Name: yup.string().required(),
        E-Mail: yup.string().email().required(),
        Adresse: yup.string().required(),
        Telefonnummer: yup.number().required().integer().min(11),
        Stadt: yup.string().required(),
        Zahlung: yup.string().required()

    })
    const { register, handleSubmit, watch, formState: { Fehler } } = useForm({
        Resolver: yupResolver(schema)
    });

    const onSubmit = (data) => {

        console.log(Daten)

    }



    zurückkehren (



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

                        <input name="thename" id="Name" placeholder='姓名' {...register("vollständiger Name")
                        } />

                        <input name="email" id="email" placeholder='电子邮件' className="text-indigo-400 "
                            {...registrieren("E-Mail")
                            } />


                        <input name="address" id="Adresse" placeholder='送货地址' {...register("address")
                        } />
                        <Eingabetyp="Nummer" name="Telefon" id="" placeholder='电话号码' {...register("phoneno")
                        } />
                        <select name="sa" id="as" {...register("Stadt")
                        }>

                            <Option deaktiviert ausgewählt >--城市名称--</option>
                            {
                                land.map((landget, i) => (
                                    <option key={i} >{countryget.city}</option>
                                ))
                            }


                        </select>
                        <div className='flex relative w-auto'>
                            <select name="" id="" className='thezahlungsbasis-full w-[70%] ' {...register("zahlung")
                            }>

                                <Option deaktiviert ausgewählt > --付款方式-- </option>
                                <option >信用卡</option>
                                <option >货到付款</option>
                                <option >银行转账</option>
                            </select>
                            <img src="http://localhost:3000/creditcard.png" alt="" className='absolute w-10 right-5' />
                        </div>

                        {/* <button type="submit" className='bg-indigo-600 p-2 Rounded-lg Font-Mono absolute '>Weiter ➔</button> */}

                    </div>
                    <input type="submit" className='bg-rose-600 p-2 abgerundet-lg font-mono text-white mt-3' />
                    </form>
            </div>



            <div className="pricesection h-20 bg-rose-600 fest unten-0 links-0 rechts-0 flexibel items-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

我通过将yup.integer()替换为yup.string()来解决了这个问题

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