React Native表单验证问题：Number.isInteger判断整数始终返回false

React Native的TextInput组件，无论设置什么keyboardType，用户输入的内容始终是字符串类型。哪怕你把初始state设为数值0，当用户输入内容后，state里存储的就会变成对应的字符串（比如输入"123"，state值为"123"）。

而Number.isInteger()方法的特性是：只有当传入的参数是数字类型且为整数时才返回true。如果传入的是字符串，哪怕内容是整数格式，也会直接返回false——这就是你遇到的核心问题。

下面提供两种可行的处理方式，根据你的业务需求选择：

方式1：输入时直接转成数字存储 #

在TextInput的onChangeText回调中，把用户输入的字符串转成整数后再更新state，从根源上保证state里存的是数字类型。同时可以过滤掉小数点，避免用户输入非整数内容：

// 以起始里程为例
<TextInput
  keyboardType="numeric"
  onChangeText={(text) => {
    // 过滤掉所有小数点
    const filteredText = text.replace(/\./g, '');
    // 转成整数，空输入设为null（方便区分未输入和输入0的情况）
    const num = filteredText ? parseInt(filteredText, 10) : null;
    // 处理转成NaN的极端情况（比如输入非数字字符，虽然数字键盘一般不会出现）
    setStartMileage(isNaN(num) ? null : num);
  }}
  // 把数字转成字符串作为TextInput的value（因为TextInput只接受字符串/undefined）
  value={startMileage !== null ? startMileage.toString() : ''}
/>

验证时直接用Number.isInteger()判断即可：

const isValid = Number.isInteger(startMileage) && Number.isInteger(endMileage);

方式2：验证时临时转成数字 #

如果不想在输入时转换state类型，可以在验证阶段先把state中的字符串转成数字，再判断是否为整数：

const validate = () => {
  // 先判断是否填写（排除初始的0或空字符串）
  if (!startMileage || !endMileage) {
    // 提示必填
    return false;
  }
  // 转成数字
  const startNum = Number(startMileage);
  const endNum = Number(endMileage);
  // 判断是否为整数
  if (!Number.isInteger(startNum) || !Number.isInteger(endNum)) {
    // 提示必须为整数
    return false;
  }
  // 其他验证逻辑
  return true;
};

这种方式的缺点是state里始终存的是字符串，后续计算时需要重复转换，不如方式1高效。

import React, { useState } from 'react';
import { View, TextInput, Button, Text, StyleSheet } from 'react-native';

const MileageForm = () => {
  const [startMileage, setStartMileage] = useState(null);
  const [endMileage, setEndMileage] = useState(null);
  const [errorMsg, setErrorMsg] = useState('');

  const validateForm = () => {
    // 验证必填项
    if (startMileage === null || endMileage === null) {
      setErrorMsg('起始和结束里程不能为空');
      return false;
    }
    // 验证是否为整数（此时state里是数字类型，直接判断）
    if (!Number.isInteger(startMileage) || !Number.isInteger(endMileage)) {
      setErrorMsg('里程必须为整数，不能包含小数');
      return false;
    }
    // 验证结束里程大于起始里程
    if (endMileage <= startMileage) {
      setErrorMsg('结束里程必须大于起始里程');
      return false;
    }
    setErrorMsg('');
    return true;
  };

  const handleSubmit = () => {
    if (validateForm()) {
      // 这里可以添加数据提交或计算逻辑
      console.log('表单验证通过:', { startMileage, endMileage });
    }
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        placeholder="请输入起始里程"
        keyboardType="numeric"
        onChangeText={(text) => {
          const filteredText = text.replace(/\./g, '');
          const num = filteredText ? parseInt(filteredText, 10) : null;
          setStartMileage(isNaN(num) ? null : num);
        }}
        value={startMileage !== null ? startMileage.toString() : ''}
      />
      <TextInput
        style={styles.input}
        placeholder="请输入结束里程"
        keyboardType="numeric"
        onChangeText={(text) => {
          const filteredText = text.replace(/\./g, '');
          const num = filteredText ? parseInt(filteredText, 10) : null;
          setEndMileage(isNaN(num) ? null : num);
        }}
        value={endMileage !== null ? endMileage.toString() : ''}
      />
      {errorMsg ? <Text style={styles.errorText}>{errorMsg}</Text> : null}
      <Button title="提交" onPress={handleSubmit} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    gap: 15,
  },
  input: {
    borderBottomWidth: 1,
    borderColor: '#ccc',
    paddingVertical: 8,
    fontSize: 16,
  },
  errorText: {
    color: '#ff4444',
    fontSize: 14,
  },
});

export default MileageForm;

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