React Hook フォームと yup 検証: 効果的なフォーム検証方法
P粉486743671
2023-08-28 10:04:56
<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> テーブルが制御されないことを望んでいます。モードを書き込み、パーサーを使用しています。
yup.integer() を yup.string() に置き換えることで、この問題を解決しました。
電話番号: yup.number().required().integer().min(11),