React Native年月日分字段文本输入的日期有效性校验方法咨询

校验位置 #

• 首选兜底校验：放在saveUserCardData函数的最开头，作为提交前的最后一道校验，避免非法数据提交。
• 可选体验优化：可以在每个输入框的onChangeText回调中增加实时校验，输入过程中就提示错误，不用等到提交才反馈。

具体实现方式 #

1. 先封装通用日期校验函数 #

这个方法利用Date对象的自动溢出处理特性，不用手动判断每月天数、闰年逻辑，准确性更高：

const isValidDate = (yearStr, monthStr, dayStr) => {
  // 先转成数字
  const year = parseInt(yearStr, 10);
  const month = parseInt(monthStr, 10);
  const day = parseInt(dayStr, 10);
  // 先判断基础范围
  if (isNaN(year) || isNaN(month) || isNaN(day)) return false;
  if (month < 1 || month > 12) return false;
  // 用Date对象校验实际合法性，注意JS月份是0开始计数
  const date = new Date(year, month - 1, day);
  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
}

2. 提交时增加校验逻辑 #

修改saveUserCardData函数，开头先做校验，不合法直接中断执行：

import { Alert } from 'react-native'; // 记得引入Alert组件

const saveUserCardData = () => {
  // 新增校验逻辑
  if (!isValidDate(yearText, monthText, dayText)) {
    Alert.alert('输入错误', '请填写合法的年月日');
    return;
  }
  // 原有逻辑不变
  let data = {
    email: user.email,
    age: dataAge[age].age,
    // 这里可以补充补前导零的逻辑，避免出现2024-1-2这种格式不符合后端要求的情况
    birthday: `${yearText}-${monthText.padStart(2, '0')}-${dayText.padStart(2, '0')}`,
    height: heightUnit === 'cm' ? dataHeightCm[height].height : dataHeightFt[height].height, 
    weight: weightUnit === 'lb' ? dataWeightLb[weight].weight : dataWeightKg[weight].weight,
    gender: gender === 'male' ? 'M' : 'F'
  };
  // 后续原有提交逻辑...
}

3. 可选：实时输入校验（优化体验） #

可以给每个输入框增加单独的校验，比如月份输入超过12时直接标红输入框，示例如下：

// 新增错误状态
const [monthError, setMonthError] = useState(false);

// 修改月份输入框的onChangeText
<TextInput
  onChangeText={(val) => {
    setMonth(val);
    const num = parseInt(val, 10);
    setMonthError(val.length > 0 && (isNaN(num) || num < 1 || num > 12));
  }}
  value={monthText}
  placeholder="Month"
  returnKeyType={'done'}
  keyboardType={'number-pad'}
  maxLength={2}
  style={{
    backgroundColor: 'white',
    height: 40,
    padding: 10,
    borderRadius: 5,
    borderColor: monthError ? 'red' : '#B7B7B7', // 错误时边框变红
    borderWidth: 1,
    width: 104,
    textAlign: 'center',
  }}
/>

内容的提问来源于stack exchange，提问作者Daniel Döbereiner