整数/十进制用户输入：如何序列化/存储值

Posted 2023-03-10

【中文标题】整数/十进制用户输入：如何序列化/存储值

【英文标题】：Integer/decimal user input: how to serialize/store the value

【发布时间】：2018-12-04 08:53:28

【问题描述】：

我们的堆栈目前是：React SPA/Apollo/GraphQL/Rails/PostgreSQL。

我们有一个带有数字输入的网络表单，可能（或不）用于输入十进制值（动态/用户创建的表单）。

我们希望表单宽松（它具有自动保存功能）。如果用户键入,3 或17,，则认为这是一个有效的数值。但不要太宽松，数字应该可以解析为浮点数并能够显示在图表中......

另外，当用户再次访问表单时，我们希望确保使用他最初键入的完全相同的值初始化数字输入（我的意思是，,3 不会神奇地变成0,3）

对于我们的堆栈，我想知道如何在不丢失初始用户输入值的情况下序列化（作为 GraphQL 有效负载发送）和存储（在 PostgreSQL 中）和操作（在 JS/Ruby 中）这样的数字。

---

我认为发送/存储字符串会更简单，只要验证它可以解析即可。

只是想知道是否有“适当”的解决方案，例如使用数字库、自定义 GraphQL 标量类型、十进制 SQL 类型……这对我来说似乎很复杂，以前有人做过类似的事情吗？

【问题讨论】：

我已经做到了，很棒。字符串是在客户端和服务器之间发送数字的可靠方式，特别是因为 JS 浮点数不能表示小数并且会有浮点运算问题。每个客户端（前端、服务器等）都应该能够从请求中读取字符串编号并将其转换为他们使用的任何 lib/解析器格式。您可能想要过滤特殊字符，如 , 。 $ % 并仅从集合 0123456789 发送，因此架构的每个部分都可以在不重新格式化的情况下理解它。

【参考方案1】：

创建两个字段。一个用于用户输入，另一个用于解析值。我认为这对于任何堆栈都不会有所不同。

挑战在于如何向用户展示您如何理解输入的值。这可以通过文本字段下的解析值提示来解决。

【参考方案2】：

您应该将输入类型选择为“文本”而不​​是数字，这样您就可以为输入创建特定格式。首先，将属性添加到您的状态

state=amount:""

表单中金额的输入部分应如下所示：

<input
            type="text"
            placeholder="Amount"
            value=this.state.amount
            onChange=this.onAmountChange
          />



onAmountChange = e => 
    const amount = e.target.value;
    if (!amount || amount.match(/^-?[0-9]\d*(\.\d0,2)?$/)) 
      this.setState(() => ( amount ));
    
  ;

上述函数中的正则表达式表示以任何带有可选 - 的数字开头，并且可以选择以 2 个十进制数字结尾。你可以为你的表格改变它。

如果您的表单是为了价格而只想添加正数，您可以使用这个正则表达式：

amount.match(/^\d1,(\.\d0,2)?$/)