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