如何验证最小最大值设置动态值?

Question

当我使用确切的数字时，它的工作。但是当我使用动态值时，验证不起作用。这是通过react-hook形式验证创建的。

<div class="form-control">
<label class="label">
<span class="label-text">Quantity</span>
</label>
<input type="number" placeholder={minOrder} {...register("quantity", {required: true, max: {stock}, min: {minOrder}})} />
<label class="label">
{errors.quantity?.type === 'min' && <span class="label-text-alt text-red-600 font-bold">You must fulfill the minimum order</span>}
{errors.quantity?.type === 'max' && <span class="label-text-alt text-red-600 font-bold">Out of Stock</span>}
</label>
</div>

Answer 1

您可以使用以下示例在react-hook-form上创建自定义验证

let minValue = 0;
let maxValue = 200;
<div>
<label htmlFor="parcel_value">Value*</label>
{errors?.parcelValue?.message && (
<span>{errors?.parcelValue?.message}</span>
)}
{errors?.parcelValue?.type == "positiveNumber" && (
<span>Value At least 1$ required</span>
)}
{errors?.parcelValue?.type == "lessThanHundred" && (
<span> Value should not be greater than 200</span>
)}
<br />
<input id="parcel_value" type="number"
{...register("parcelValue", {
required: "(required)",
validate: { positiveNumber: (value) => parseFloat(value) > minValue,
lessThanHundred: (value) => parseFloat(value) < maxValue },
})}
/>
</div>

来源:https://codesandbox.io/s/react-hook-form-custom-validation-8kuu7