如何在React JS的表单中设置合法年龄校验限制？

前置依赖 #

本方案基于你当前使用的moment日期库实现，可直接和你现有的出生日期格式化逻辑结合使用。

实现步骤 #

1. 首先按你提供的逻辑完成出生日期格式化

// 格式化出生日期
req.validated.birthdate = moment(req.validated.birthdate, "DD/MM/YYYY").format("YYYY-MM-DD");

2. 编写年龄校验逻辑
   注意：计算年龄时使用moment的diff方法按年计算，会自动判断生日是否已过，避免出现年份相减但生日未到导致的年龄计算错误

/**
 * 校验年龄是否在0-100岁区间内
 * @param {string} birthDateStr 格式化后YYYY-MM-DD格式的出生日期
 * @returns {boolean} 校验是否通过
 */
const validateAge = (birthDateStr) => {
  const birthDate = moment(birthDateStr, "YYYY-MM-DD");
  const currentDate = moment();
  const age = currentDate.diff(birthDate, 'years');
  return age >= 0 && age <= 100;
}

// 业务中调用校验
const isAgeValid = validateAge(req.validated.birthdate);
if (!isAgeValid) {
  // 自定义抛出错误逻辑，可结合你使用的表单/请求框架调整报错形式
  throw new Error('年龄需在0-100岁之间，请检查出生日期是否正确');
}

React前端表单常用场景适配 #

如果你使用Ant Design Form这类组件库开发前端表单，可以直接将校验逻辑写入自定义校验规则，实现实时校验：

// 自定义出生日期校验规则
const ageValidator = (_, value) => {
  if (!value) return Promise.resolve();
  const birthDate = moment(value, "DD/MM/YYYY");
  const age = moment().diff(birthDate, 'years');
  if (age < 0 || age > 100) {
    return Promise.reject(new Error('年龄需在0到100岁之间，请修正出生日期'));
  }
  return Promise.resolve();
}

// 表单项配置示例
<Form.Item
  name="birthdate"
  label="出生日期"
  rules={[
    { required: true, message: '请选择出生日期' },
    { validator: ageValidator }
  ]}
>
  <DatePicker format="DD/MM/YYYY" />
</Form.Item>

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