如何使用Yup对下拉选择的出生日月年字段实现最低18岁年龄校验

直接给dateOfBirth对象字段添加自定义test校验即可，完整代码如下：

dateOfBirth: Yup.object().shape({
  day: Yup.string().required('day is required'),
  month: Yup.string().required('month is required'),
  year: Yup.string().required('year is required')
}).test('is-over-18', '年龄最低需满18周岁', function (birthObj) {
  const { day, month, year } = birthObj;
  // 拼接出生日期，注意JS Date月份从0开始，需减1
  const birthDate = new Date(+year, +month - 1, +day);
  // 可选：校验所选日期是否合法，避免出现2月30日这类无效日期
  const isValidDate = birthDate.getFullYear() === +year
    && birthDate.getMonth() === +month - 1
    && birthDate.getDate() === +day;
  if (!isValidDate) {
    return this.createError({ message: '请选择合法的出生日期' });
  }
  // 计算18年前的当前日期作为临界值
  const eighteenYearsAgo = new Date();
  eighteenYearsAgo.setFullYear(eighteenYearsAgo.getFullYear() - 18);
  // 出生日期早于等于临界值则校验通过
  return birthDate <= eighteenYearsAgo;
})

注意事项 #

• 如果你的下拉选项已经做了日月联动（比如选2月后日的选项最多只有28/29天），可以去掉日期合法性校验的逻辑
• 错误提示文案可根据业务需求自行修改，原生的required提示也可以替换为中文文案

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