<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}
;
我通过将yup.integer()替换为yup.string()来解决了这个问题
phoneno: yup.number().required().integer().min(11),