在表格中，我有一個date-picker. 從date-picker用戶選擇出生日期。如果年齡距當前日期不到五年，我想拋出一個錯誤。假設用戶選擇 2015 年，那么它應該拋出一個錯誤。
<div class="input-group date" data-provide="datepicker">
<input
{...register("dob", {
required: true,
})}
type="date"
id="birthday"
min="1899-01-01"
max="2000-13-13"
class="form-control"
onClick={set}
/>
{errors?.dob?.type === "required" && (
<p>This field is required</p>
)}
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
uj5u.com熱心網友回復：
您應該定義一個自定義validate函式來檢查所選日期并將其傳遞給該register部分。
一個最小的例子：
const validateDate = (value) => {
const selected = new Date(value).getFullYear();
const now = new Date().getFullYear();
return now - selected >= 5;
};
...
<input
{...register("dob", {
required: true,
validate: validateDate
})}
type="date"
id="birthday"
min="1899-01-01"
max="2000-13-13"
class="form-control"
onClick={set}
/>
{errors?.dob?.type === "required" && (
<p>This field is required</p>
)}
{errors?.dob?.type === "validate" && <p>Invalid date</p>}
代碼沙盒
uj5u.com熱心網友回復：
因此，根據您的代碼，您需要執行以下操作：
const {
register,
handleSubmit,
formState: { errors },
watch,
setError
} = useForm();
const onSubmit = (data) => console.log(data);
useEffect(() => {
const db = watch("dob");
if (db) {
const dbDate = new Date(db).getFullYear();
const currentDate = new Date().getFullYear();
const age = currentDate - dbDate;
if (age < 5) {
setError("dob", {
type: "too young",
message: "Sorry bro! you're too young to use this ;)"
});
}
}
}, [watch("dob")]);
然后在error任何你想要的地方使用：
{errors?.dob?.type === "too young" && (
<p style={{ color: "red" }}>{errors.dob.message}</p>
)}
這是一個作業演示，用于展示它的外觀：https : //codesandbox.io/s/funny-surf-d4gtt?file=/src/App.js : 2336-2453
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/337029.html
標籤：javascript 反应 反应钩形