<p>I created a Buy Now component for my React JS e-commerce website. The problem I am facing is that the validation of the form is not completed. I used a parser but it still didn't validate my form.这是我的代码：</p> <pre class="brush:php;toolbar:false;">import React, { useEffect, useState } from 'react' import "./e.css" import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup" import * as yup from "yup" export default function BuyNow(props) { const [country, setCountry] = useState([]) useEffect(() => { const getcountry = async () => { const res = await fetch("http://localhost:3000/setpk.json") const getcon = await res.json() setCountry(await getcon) } getcountry() }, []) const schema = yup.object({ fullname: yup.string().required(), email: yup.string().email().required(), address: yup.string().required(), phoneno: yup.number().required().integer().min(11), city: yup.string().required(), payment: yup.string().required() }) const { register, handleSubmit, watch, formState: { errors } } = useForm({ resolver: yupResolver(schema) }); const onSubmit = (data) => { console.log(data) } return ( <> <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("fullname") } /> <input name="email" id="email" placeholder='电子邮件' className="text-indigo-400 " {...register("email") } /> <input name="address" id="address" placeholder='送货地址' {...register("address") } /> <input type="number" name="phone" id="" placeholder='电话号码' {...register("phoneno") } /> <select name="sa" id="as" {...register("city") }> <option disabled selected >--城市名称--</option> { country.map((countryget, i) => ( <option key={i} >{countryget.city}</option> )) } </select> <div className='flex relative w-auto'> <select name="" id="" className='thepayment basis-full w-[70%] ' {...register("payment") }> <option disabled selected > --付款方式-- </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 '>Proceed ➔</button> */} </div> <input type="submit" className='bg-rose-600 p-2 rounded-lg font-mono text-white mt-3' /> </form> </div> <div className="pricesection h-20 bg-rose-600 fixed bottom-0 left-0 right-0 flex 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> </> ) }</pre> <p>我希望表单是不受控制的。我编写了模式并使用了解析器。</p>