React Hook form与yup验证：有效的表单验证方法
<p>我为我的React JS电子商务网站创建了一个立即购买组件。我面临的问题是表单的验证没有完成。我使用了一个解析器，但它仍然没有验证我的表单。这是我的代码：</p>
<pre class="brush:php;toolbar:false;">从 'react' 导入 React, { useEffect, useState }
导入“./e.css”
从“react-hook-form”导入{useForm}；
从“@hookform/resolvers/yup”导入{ yupResolver }
import * as yup from “yup”;
导出默认函数 BuyNow(props) {
const [国家/地区，设置国家/地区] = useState([])
useEffect(() => {
const getcountry = async () =>; {
const res = wait fetch(“http://localhost:3000/setpk.json”)
const getcon = 等待 res.json()
设置国家/地区（等待 getcon）
}
获取国家/地区（）
}, [])
const schema = 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 { 注册、handleSubmit、监视、formState: { 错误 } } = useForm({
解析器： yupResolver(schema)
});
const onSubmit = (数据) => {
控制台.日志（数据）
}
返回 （
<>
立即购买
;
<表单onSubmit={handleSubmit(onSubmit)}>
<输入名称=“名称” id=“姓名” placeholder='姓名' {...register("全名")
} //>
<输入姓名=“电子邮件” id="电子邮件" placeholder='电子邮件' className=“text-indigo-400”
{...注册(“电子邮件”)
} //>
<输入名称=“地址”; id=“地址”； placeholder='发货地址' {...register("地址")
} //>
<输入类型=“数字”姓名=“电话” id=“” placeholder='电话号码' {...register("phoneno")
} //>
<选择名称=“sa”; id="as"; {...注册(“城市”)
}>
<选项已禁用>--城市名称--
{
国家.地图((countryget, i) => (
<选项键={i}>{countryget.city}</选项>
））
}
</选择>
<选择名称=“” id=“” className='付款基础-完整 w-[70%] ' {...register("付款")
}>
<已禁用选项> -- 付款方式-- </option>
<选项>信用卡</选项>
<选项>货到付款
<选项>银行转账
</选择>
{/* <按钮类型=“提交” className='bg-indigo-600 p-2 rounded-lg font-mono Absolute '>继续 ➔; */}
<输入类型＝“提交” className='bg-rose-600 p-2 rounded-lg font-mono text-white mt-3' //>
</表格>
<div className="pricesection h-20 bg-rose-600 固定 Bottom-0 left-0 right-0 flex items-center px-1 text-rose-100 justify-evenly md:justify-around>
总价
${props.totalprice}
;
</>
）
}</pre>
<p>我希望表单是不受控制的。我编写了模式并使用了解析器。</p>
