<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),