React Hook form与yup验证:有效的表单验证方法
P粉486743671
P粉486743671 2023-08-28 10:04:56
0
1
471
<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>
P粉486743671
P粉486743671

全部回复(1)
P粉022723606

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板