如何在表单验证中校验double类型？RESTful API提交小数遇验证异常

嘿，我懂你遇到的这个麻烦！这其实是HTML原生number输入框的默认行为搞的鬼——当你没指定step属性时，它默认步长是1，浏览器就会判定只能输入整数或者.0结尾的数值，这就是为啥2.0能通过验证，2.3却会被报错要求输入整数。

核心解决方案：添加step属性 #

你只需要给Form.Control加上step属性，就能允许输入指定精度的小数了：

• 如果你的价格只需要一位小数（比如对应欧元的分单位），可以设置step="0.1"
• 如果需要支持任意精度的小数，直接用step="any"就行

修改后的代码片段如下：

<Form.Group as={Col} controlId="productPrice">
  <Form.Label>EUR</Form.Label>
  <Form.Control 
    onChange={handleChange} 
    type="number" 
    name="eur" 
    placeholder="Price EUR" 
    required 
    step="0.1" {/* 按需调整step值，比如用"any"支持任意小数 */}
  />
</Form.Group>

额外小建议 #

为了确保传给后端API的是标准的double类型数值，你可以在handleChange函数里把输入值转换成Number类型再存入product状态，避免传递字符串类型的数值：

const handleChange = (e) => {
  const { name, value } = e.target;
  setProduct(prev => ({
    ...prev,
    [name]: name === 'eur' ? Number(value) : value
  }));
}

内容的提问来源于stack exchange，提问作者user10620548