如何验证已用逗号格式化的 redux 表单字段

Question

我有一个字段必须具有最小值 100,000，该字段使用 minValue 函数进行验证。字段中的数字必须格式化为在必要时以逗号显示，例如 - '100,000'

Redux 字段

const minSumValue = 100000;

<Field
  name="buildings_sum_insured"
  type="text"
  format={formatNumberField}
  placeholder="Minimum €100,000"
  component={dgInput}
  validate={minValue(`${minSumValue}`)}
/>

formatNumberField 函数

function formatNumberField(number) {
  if (!number) return "";
   const n = parseInt(number.replace(/\D/g, ""), 10);
   return n.toLocaleString();
}

验证函数

export const minValue = min => value => value && value < min ? `Must be at least ${min}` : undefined

格式数字功能按预期工作，但它导致验证功能无法工作。验证在没有格式函数的情况下起作用。

如何在验证函数中验证格式化的数字？我是否需要解析该值并删除任何特殊字符？

任何帮助都会很棒！

Answer 1

从字符串到数字再到字符串再到数字似乎有点傻，所以可能有更好的方法来做到这一点。但以下应该有效。您可以更改 minValue 函数，但我不会改变它，而是在我们调用它之前将值转换为 number。

我们从 string 和 return 中删除所有逗号其数值：

const toNumber = (value, fallback = undefined) => {
  return value ? parseFloat(value.replaceAll(",", "")) : fallback;
}

我们使用箭头函数访问字符串 value，然后调用 minValue 函数进行数值转换：

<Field
  ...
  validate={(value) => minValue(minSumValue)(toNumber(value, undefined))}
/>

如何验证已用逗号格式化的 redux 表单字段

How to validate a redux form field that has been formatted with commas

javascript

redux

redux-form