如何在React应用中使用Ant Design验证十进制表单输入

我来帮你搞定这个表单验证的需求！你的现有代码只做了必填校验，缺少对十进制数字格式的验证，我们可以通过在Form.Item的rules中添加正则匹配规则或者自定义验证函数来实现输入非数字/十进制内容时的错误提示。

方案一：使用正则表达式验证（简洁高效） #

我们可以用正则表达式匹配正负整数和十进制数，把这个规则加到每个输入框的校验规则里：

修改后的完整代码 #

import { useContext, useState } from 'react';
import { Form, Input } from 'antd';
import { store } from './your-store-path'; // 替换成你的store实际路径
import GpsConstants from './your-constants-path'; // 替换成你的常量实际路径

function GPSPosition() { 
  const { dispatch } = useContext(store); 
  const [isDisable, setCheckBoxDisable] = useState(false);

  const onApply = (values) => { 
    console.log('Success:', values); 
    dispatch({ 
      type: "updateGPSCoordinates", 
      latitude: values.latitude, 
      longitude: values.longitude, 
      altitude: values.altitude 
    }); 
  }; 

  // 十进制数字验证正则：匹配正负整数、正负小数
  const decimalNumberRegex = /^-?\d+(\.\d+)?$/;

  return ( 
    <div> 
      <div className="homepage-widget-header"> 
        <Form 
          {...layout} 
          className="gps-coordinates-form" 
          onFinish={onApply} 
        > 
          <Form.Item 
            label={GpsConstants.LATITUDE} 
            name="latitude" 
            initialValue="25.328380" 
            rules={[ 
              { required: true, message: 'Please enter latitude!' },
              { 
                pattern: decimalNumberRegex, 
                message: 'Please enter a valid decimal number for latitude!' 
              },
              // 可选：添加纬度范围校验（-90到90）
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value) return Promise.resolve();
                  const num = parseFloat(value);
                  if (num >= -90 && num <= 90) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('Latitude must be between -90 and 90!'));
                },
              }),
            ]} 
          > 
            <Input /> 
          </Form.Item> 

          <Form.Item 
            label={GpsConstants.LONGITUDE} 
            name="longitude" 
            initialValue="51.435989" 
            rules={[ 
              { required: true, message: 'Please enter longitude!' },
              { 
                pattern: decimalNumberRegex, 
                message: 'Please enter a valid decimal number for longitude!' 
              },
              // 可选：添加经度范围校验（-180到180）
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value) return Promise.resolve();
                  const num = parseFloat(value);
                  if (num >= -180 && num <= 180) {
                    return Promise.resolve();
                  }
                  return Promise.reject(new Error('Longitude must be between -180 and 180!'));
                },
              }),
            ]} 
          > 
            <Input /> 
          </Form.Item> 

          <Form.Item 
            label={GpsConstants.ALTITUDE} 
            name="altitude" 
            initialValue="0.0" 
            rules={[ 
              { required: true, message: 'Please enter altitude!' },
              { 
                pattern: decimalNumberRegex, 
                message: 'Please enter a valid decimal number for altitude!' 
              },
            ]} 
          > 
            <Input /> 
          </Form.Item> 
        </Form>
      </div> 
    </div> 
  ); 
} 

export default GPSPosition;

关键说明 #

• 正则表达式解析：/^-?\d+(\.\d+)?$/ 可以匹配：
  • 正整数（如123）、负整数（如-456）
  • 正小数（如25.328）、负小数（如-51.43）
  • 纯小数（如0.0）
    任何包含字母、特殊字符（!@#$等）或不符合格式的内容都会触发错误提示。
• 可选范围校验：我额外添加了纬度（-90到90）和经度（-180到180）的范围验证，如果你不需要可以直接删除这部分代码。
• 验证时机：Ant Design会在用户输入、失去焦点或提交表单时自动触发校验，完全符合你的需求。

方案二：自定义验证函数（更灵活） #

如果需要更复杂的验证逻辑，比如自定义错误判断逻辑，可以用validator函数替换正则规则：

{
  validator(_, value) {
    if (!value) return Promise.resolve(); // 已经有必填校验，这里可以跳过空值判断
    const isDecimal = /^-?\d+(\.\d+)?$/.test(value);
    if (isDecimal) {
      return Promise.resolve();
    }
    return Promise.reject(new Error('Please enter a valid decimal number!'));
  },
}

这样修改后，当用户输入字母、特殊字符或者非十进制格式的内容时，表单就会立刻显示对应的错误提示啦！

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