React Hook フォームと yup 検証: 効果的なフォーム検証方法
P粉486743671
P粉486743671 2023-08-28 10:04:56
0
1
472
<p>React JS 電子商取引 Web サイト用に Buy Now コンポーネントを作成しました。私が直面している問題は、フォームの検証が完了していないことです。パーサーを使用しましたが、それでもフォームが検証されませんでした。これは私です:</p> <pre class="brush:php;toolbar:false;">import React, { useEffect, useState } from 'react' 「./e.css」をインポートします。 import { useForm } from "react-hook-form"; 「@hookform/resolvers/yup」から { yupResolver } をインポートします。 import * as yup from "yup" デフォルト関数のエクスポート BuyNow(props) { const [国, set Country] = useState([]) useEffect(() => { const getcountry = async () => { const res = await fetch("http://localhost:3000/setpk.json") const getcon = await res.json() set Country(getcon を待つ) } getcountry() }、[]) const スキーマ = 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 { register、handleSubmit、watch、formState: { エラー } } = useForm({ リゾルバ: yupResolver(スキーマ) }); const onSubmit = (データ) => { コンソール.ログ(データ) } 戻る ( <> <div className="詳細 h-[90vh] bg-indigo-600 mt-20 text-indigo-400 text-center"> <h1 className='text-indigo-200'>立即购买</h1> <フォーム onSubmit={handleSubmit(onSubmit)}> <div className='space-y-5 mt-4 flex flex-col w-[70%] sm:w-[66%] md:w-[55%] mx-auto'> <入力名=「名前」 id="名前" placeholder='姓名' {...register("フルネーム") } /> <入力名="メール" id="メール" placeholder='電子邮件' className="text-indigo-400 " {...登録("メール") } /> <入力名="住所" id="アドレス" placeholder='送货地址' {...register("住所") } /> <入力タイプ=「数値」名前=「電話」 id="" placeholder='電话番号' {...register("電話番号") } /> <名前を選択=「さ」 id=「として」 {...登録("都市") }> <オプションが選択されていません>--城市名--</option> { country.map((countryget, i) => ( <option key={i} >{countryget.city}</option> )) } </選択> <div className='flex 相対 w-auto'> <名前を選択="" id="" className='支払基準-完全 w-[70%] ' {...register("payment") }>> <オプションが選択されて無効になっています> --付款方式-- </option> <option >信用卡</option> <option >付款</option> <option >银行转账</option> </選択> <img src="http://localhost:3000/creditcard.png" alt="" className='absolute w-10 right-5' /> </div> {/* <ボタンの種類="送信" className='bg-indigo-600 p-2rounded-lg font-monoAbsolute '>進む ➔</button> */} </div> <入力タイプ=「送信」 className='bg-rose-600 p-2rounded-lg font-mono text-white mt-3' /> </フォーム> </div> <div className="pricesection h-20 bg-rose-600fixedbottom-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粉486743671
P粉486743671

全員に返信(1)
P粉022723606

yup.integer() を yup.string() に置き換えることで、この問題を解決しました。

電話番号: yup.number().required().integer().min(11),

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート