React Hook form与yup验证:有效的表单验证方法
P粉486743671
P粉486743671 2023-08-28 10:04:56
[React讨论组]
<p>我为我的React JS电子商务网站创建了一个立即购买组件。我面临的问题是表单的验证没有完成。我使用了一个解析器,但它仍然没有验证我的表单。这是我的代码:</p> <pre class="brush:php;toolbar:false;">import React, { useEffect, useState } from 'react' import &quot;./e.css&quot; import { useForm } from &quot;react-hook-form&quot;; import { yupResolver } from &quot;@hookform/resolvers/yup&quot; import * as yup from &quot;yup&quot; export default function BuyNow(props) { const [country, setCountry] = useState([]) useEffect(() =&gt; { const getcountry = async () =&gt; { const res = await fetch(&quot;http://localhost:3000/setpk.json&quot;) 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) =&gt; { console.log(data) } return ( &lt;&gt; &lt;div className=&quot;details h-[90vh] bg-indigo-600 mt-20 text-indigo-400 text-center&quot;&gt; &lt;h1 className='text-indigo-200'&gt;立即购买&lt;/h1&gt; &lt;form onSubmit={handleSubmit(onSubmit)}&gt; &lt;div className='space-y-5 mt-4 flex flex-col w-[70%] sm:w-[66%] md:w-[55%] mx-auto'&gt; &lt;input name=&quot;thename&quot; id=&quot;name&quot; placeholder='姓名' {...register(&quot;fullname&quot;) } /&gt; &lt;input name=&quot;email&quot; id=&quot;email&quot; placeholder='电子邮件' className=&quot;text-indigo-400 &quot; {...register(&quot;email&quot;) } /&gt; &lt;input name=&quot;address&quot; id=&quot;address&quot; placeholder='送货地址' {...register(&quot;address&quot;) } /&gt; &lt;input type=&quot;number&quot; name=&quot;phone&quot; id=&quot;&quot; placeholder='电话号码' {...register(&quot;phoneno&quot;) } /&gt; &lt;select name=&quot;sa&quot; id=&quot;as&quot; {...register(&quot;city&quot;) } &gt; &lt;option disabled selected &gt;--城市名称--&lt;/option&gt; { country.map((countryget, i) =&gt; ( &lt;option key={i} &gt;{countryget.city}&lt;/option&gt; )) } &lt;/select&gt; &lt;div className='flex relative w-auto'&gt; &lt;select name=&quot;&quot; id=&quot;&quot; className='thepayment basis-full w-[70%] ' {...register(&quot;payment&quot;) }&gt; &lt;option disabled selected &gt; --付款方式-- &lt;/option&gt; &lt;option &gt;信用卡&lt;/option&gt; &lt;option &gt;货到付款&lt;/option&gt; &lt;option &gt;银行转账&lt;/option&gt; &lt;/select&gt; &lt;img src=&quot;http://localhost:3000/creditcard.png&quot; alt=&quot;&quot; className='absolute w-10 right-5' /&gt; &lt;/div&gt; {/* &lt;button type=&quot;submit&quot; className='bg-indigo-600 p-2 rounded-lg font-mono absolute '&gt;Proceed ➔&lt;/button&gt; */} &lt;/div&gt; &lt;input type=&quot;submit&quot; className='bg-rose-600 p-2 rounded-lg font-mono text-white mt-3' /&gt; &lt;/form&gt; &lt;/div&gt; &lt;div className=&quot;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&quot;&gt; &lt;h2 className='text-xl md:text-2xl md:font-bold '&gt;总价&lt;/h2&gt; &lt;h2 className='text-2xl font-bold '&gt;${props.totalprice}&lt;/h2&gt; &lt;/div&gt; &lt;/&gt; ) }</pre> <p>我希望表单是不受控制的。我编写了模式并使用了解析器。</p>
P粉486743671
P粉486743671

全部回复(1)
P粉022723606

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号