如何验证最小最大设置动态值？答案

【问题标题】：How can I validate min max setting dynamic value?如何验证最小最大设置动态值？
【发布时间】：2022-07-06 19:19:30
【问题描述】：

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

                          <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>

【问题讨论】：

标签： react-hook-form

【解决方案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

【讨论】：