我花了很長時間試圖讓它正確驗證，但它只是沒有發生。我已經在底部添加了一些文本，以便在發生錯誤時輸出，email但無論如何它總是說no error。
編輯：沙盒鏈接 - https://codesandbox.io/s/damp-star-8gv3l
這是我的輸入：
<div>
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700"
>
Email address
</label>
<div className="mt-1">
<input
{...register("email", {
required: {
value: true,
message: "Please enter your email address",
},
pattern: {
value:
/^(([^<>()[\]\\.,;:\s@\"] (\.[^<>()[\]\\.,;:\s@\"] )*)|(\". \"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9] \.) [a-zA-Z]{2,}))$/,
message: "Invalid email address",
},
})}
id="email"
name="email"
type="email"
autoComplete="off"
className={`input w-full ${
!errors.email && dirtyFields.email && "!bg-green-50"
}`}
/>
</div>
{errors.email ? "error" : "no error"}
{errors.email?.message && (
<ErrorMessage>{errors.email?.message}</ErrorMessage>
)}
</div>
這是我的鉤子：
const {
register,
watch,
control,
formState: { errors, isValid, dirtyFields },
} = useForm<SignupProps>({
defaultValues: {
email: "",
password: "",
confirmPassword: "",
username: "",
firstName: "",
surname: "",
isShop: false,
},
});
uj5u.com熱心網友回復：
根據您的代碼和框，這是您必須更改的內容：
- 添加
<form />標簽 - 添加
mode: 'onChange'的useForm選項，同時在輸入輸入來顯示錯誤 - 如果要在提交時觸發驗證，請添加提交按鈕
- 顯示驗證通過的錯誤資訊
作業代碼和盒子：https ://codesandbox.io/s/autumn-sea-ps37x ? file =/ pages/index.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/383864.html
標籤：javascript 反应 形式 下一个.js 反应钩形