我在我的项目中使用了react hook form。如何验证input type ='file'?它只接受PDF。它是成功地插入到数据库现在,当我想,只有PDF应该被允许。我用的是react hook form v7.如果有人知道请推荐我。提前感谢!
这是我的代码
import React from 'react'
import { useForm } from 'react-hook-form';
import { ToastContainer, toast } from 'react-toastify';
export const Workshop = () => {
const { register, handleSubmit, formState: { errors }, reset } = useForm();
const onSubmit = async (data, e) => {
const formData = new FormData();
formData.append('workshop',data.workshop)
formData.append('participants',data.participants)
formData.append('startdate',data.startdate)
formData.append('selectedfile',data.selectedfile[0])
formData.append('establishmentdate',data.establishmentdate)
console.log(data)
reset()
const requestOptions = {
method: 'POST',
// headers: { 'Content-Type': 'application/json' },
body: formData
};
const response = await fetch("http://localhost:3001/workshop", requestOptions);
try {
if (response.status == 200) {
toast.success("Successfully added");
}
}
catch {
toast.error("Invalid");
}
const jsonData = await response.json();
console.log(jsonData)
// toast.error("Invalid");
};
return (
<div className="container ">
<ToastContainer />
<form onSubmit={handleSubmit(onSubmit)}>
<div class="mb-3 mt-5" >
<h2>Details of Workshops/Seminars
</h2>
<label for="exampleFormControlInput1" class="form-label">Name of the workshop/ seminar
</label>
<input type="text" class="form-control w-25" name="workshop" id="exampleFormControlInput1" {...register("workshop", { required: true, pattern:{value:/^[a-zA-Z]+$/ ,message:'Only characters allowed'}})} />
{errors.workshop && errors.workshop.type === "required" && (
// <span role="alert">This is required</span>
<div style={{color:'red'}}> This is required</div>
)}
{errors.workshop && errors.workshop.type === "pattern" && (
<div style={{color:'red'}}> Only characters allowed</div>
)}
</div>
<div class="mb-3 w-25 ">
<label for="exampleFormControlTextarea1" class="form-label">Number of Participants
</label>
<input type="text" class="form-control" id="exampleFormControlTextarea1" name="participants" {...register("participants", { required: true, pattern:{value:/^[0-9\b]+$/ ,message:'Only characters allowed'}})} />
{errors.participants && errors.participants.type === "required" && (
// <span role="alert">This is required</span>
<div style={{color:'red'}}> This is required</div>
)}
{errors.participants && errors.participants.type === "pattern" && (
<div style={{color:'red'}}> Only numbers allowed</div>
)}
</div>
<div class="mb-3 w-25">
<label for="exampleFormControlTextarea1" class="form-label">Date From – To
</label>
<input type="date" class="form-control" id="exampleFormControlTextarea1" name="startdate" {...register("startdate",{required:true})} />
{errors.startdate && errors.startdate.type === "required" && (
// <span role="alert">This is required</span>
<div style={{color:'red'}}> This is required</div>
)}
{errors.startdate && errors.startdate.type === "valueAsDate" && (
<div style={{color:'red'}}> Only numbers allowed</div>
)}
</div>
<div class="mb-3 w-25">
<label for="exampleFormControlTextarea1" class="form-label">Link to the Activity report on the website(Upload PDF)
</label>
<input type="file" class="form-control" id="exampleFormControlTextarea1" name="selectedfile" {...register('selectedfile', {
required:true,
})} />
</div>
<div class="mb-3 w-25">
<label for="exampleFormControlTextarea1" class="form-label">Date of establishment of IPR cell
</label>
<input type="date" class="form-control" id="exampleFormControlTextarea1" name="establishmentdate" {...register("establishmentdate",{required:true})} />
{errors.establishmentdate && errors.establishmentdate.type === "required" && (
// <span role="alert">This is required</span>
<div style={{color:'red'}}> This is required</div>
)}
{errors.establishmentdate && errors.establishmentdate.type === "valueAsDate" && (
<div style={{color:'red'}}> Only numbers allowed</div>
)}
</div>
<button type="submit" class="btn btn-primary me-md-2">Submit</button>
<button type="button" class="btn btn-primary me-md-2" >Download Excel</button>
<button class="btn btn-primary me-md-2" >Download PDF</button>
<button class="btn btn-primary me-md-2" >Download Word</button>
</form>
</div>
)
}
我该怎么解决这个问题?
3条答案
按热度按时间wixjitnu1#
React hook form不提供开箱即用的文件验证。但是,您可以自己实现文件类型验证。
尝试在你的submit方法中添加这样的东西:
我采用了您的部分代码并在此codesandbox中创建了一个示例。
有关
setError
功能的更多信息,请阅读docs。如果你想要更复杂的客户端验证(对于文件和一般情况),你可以看看this视频。
tktrz96b2#
required属性指定输入字段是必需的。
这意味着用户必须选择要上传的文件。validate函数用于验证已上传的文件。该函数检查以确保文件是PDF文件。如果不是,将显示错误消息。
下面是工作示例:
ttygqcqt3#
也许只为输入添加接受属性会容易得多?
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept