Formulaire React Hook et validation ouais : méthode de validation de formulaire efficace
<p>J'ai créé un composant Acheter maintenant pour mon site Web de commerce électronique React JS. Le problème auquel je suis confronté est que la validation du formulaire n'est pas terminée. J'ai utilisé un analyseur mais il n'a toujours pas validé mon formulaire.这是我的代码：</p>
<pre class="brush:php;toolbar:false;">importer React, { useEffect, useState } depuis 'react'
importer "./e.css"
importer { useForm } depuis "react-hook-form" ;
importer { yupResolver } depuis "@hookform/resolvers/yup"
importer * comme ouais depuis "oui"
fonction d'exportation par défaut BuyNow (accessoires) {
const [pays, setCountry] = useState([])
useEffect(() => {
const getcountry = async () => {
const res = wait fetch("http://localhost:3000/setpk.json")
const getcon = attendre res.json()
setCountry (attendre getcon)
}
obtenirpays()
}, [])
schéma const = ouais.object({
nom complet : ouais.string().required(),
email : ouais.string().email().required(),
adresse : ouais.string().required(),
phoneno : ouais.number().required().integer().min(11),
ville : ouais.string().required(),
paiement : ouais.string().required()
})
const {register, handleSubmit, watch, formState : { erreurs } } = useForm({
résolveur : yupResolver (schéma)
});
const onSubmit = (données) => {
console.log(données)
}
retour (
≪>
<div className="détails 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="lenom" id="nom" placeholder='姓名' {...register("fullname")
} />
<input name="email" id="email" placeholder='电子邮件' className="text-indigo-400 "
{...s'inscrire("e-mail")
} />
<nom d'entrée="adresse" id="adresse" placeholder='送货地址' {...register("adresse")
} />
<type d'entrée="numéro" nom = "téléphone" identifiant="" placeholder='电话号码' {...s'inscrire("phoneno")
} />
<select name="sa" id="comme" {...s'inscrire("ville")
}>
<option désactivée sélectionnée>--城市名称--</option>
{
country.map((countryget, i) => (
<option key={i} >{countryget.city}</option>
))
}
</sélectionner>
<div className='flex relatif w-auto'>
<sélectionner le nom="" identifiant="" className='thepayment base-full w-[70%] ' {...register("paiement")
}>
<option désactivée sélectionnée> --付款方式-- </option>
<option >信用卡</option>
<option >货到付款</option>
<option >银行转账</option>
</sélectionner>
<img src="http://localhost:3000/creditcard.png" alt="" className='absolu w-10 right-5' />
</div>
{/* <button type="soumettre" className='bg-indigo-600 p-2 arrondi-lg font-mono absolu '>Continuer ➔</bouton> */}
</div>
<input type="soumettre" className='bg-rose-600 p-2 arrondi-lg police-mono texte-blanc mt-3' />
</formulaire>
</div>
<div className="pricesection h-20 bg-rose-600 fixe en bas-0 gauche-0 droite-0 flex items-center px-1 text-rose-100 justifier uniformément md:justify-around">
<h2 className='text-xl md:text-2xl md:font-bold '>总价</h2>
<h2 className='text-2xl font-bold '>${props.totalprice}</h2>
</div>
≪/>
)
}</pré>
<p>
