适用于业务场景如下图：输入框输入年龄，选择年龄单位，判断年龄阶段
HTML用element-ui
<el-input v-model="ageNumber" placeholder="请输入" maxlength="3" @blur="ageInput"><el-select slot="append" v-model="ageUnit" placeholder="请选择" @change="ageUnitChange"><el-option v-for="item in ageUnitOptions" :key="item.key" :label="item.value" :value="item.key" /></el-select></el-input><el-select v-model="ageRange" placeholder="请选择"><el-option v-for="item in ageGroupOptions" :key="item.key" :label="item.value" :value="item.key" /></el-select><el-tooltip placement="top" effect="dark"><div slot="content"><div v-for="item in ageGroupOptions" :key="item.key">{{item.value}}：{{item.min}}{{item.max?`-${item.max}${item.unitName}`:item.unitName}}</div></div><i class="el-icon-warning" /></el-tooltip>
js
const YEAR = 1const MONTH = 2const DAY = 3const ageUnitOptions = [{key: YEAR,value: '岁'}, {key:MONTH,value: '月'},{key: DAY,value: '天'}]const ageGroupOptions = [{value: '新生儿',min: 1,max: 28,unit: DAY,unitName: '天',key: 1},{value: '婴幼儿',min: 1,max: 36,unit: MONTH,unitName: '个月',key: 2},{value: '青少年',min: 3,max: 17,unit: YEAR,unitName: '岁',key: 3},{value: '成年人',min: 18,max: 59,unit: YEAR,unitName: '岁',key: 4},{value: '老年人',min: 60,max: null,unit: YEAR,unitName: '岁及以上',key: 5}]let ageUnit = YEARlet ageNumber = ''function findAgeRange(num, u) {const item = ageGroupOptions.find((i, index) => {return index !== ageGroupOptions.length - 1 && i.unit === u && num <= i.max && num >= i.min})if (item) {return item.key} else {return judgeAgeRange(u, num)}}function judgeAgeRange(unit, age) {let u = unitlet num = ageswitch (unit) {case YEAR: // 年龄选的岁是最大的，转为月，单位变为月u = MONTHnum = num * 12 // 转成月判断return findAgeRange(num, u)case MONTH: // 年龄选的月可以升为岁，可以降为天if (num > 36) { // 因为以月为单位的年龄阶段只有婴幼儿, 婴幼儿的最大月份是36u = YEARnum = num / 12 // 转成年判断} else {u = DAYnum = num * 28 // 因为以日为单位的年龄阶段只有新生儿, 新生儿的最大天数是28}return findAgeRange(num, u)case DAY:if (num > 30) { // 因为新生儿最大是28天，一个月按照30天算,u = MONTHnum = num / 30return findAgeRange(num, u)} else {return 2}default: return -1}}function getAgeRange(age, unit) {const num = parseInt(age)// 默认第一项新生儿let range = 1const last = ageGroupOptions[ageGroupOptions.length - 1]if (num >= last.min && unit === last.unit) {// 判断最后一项，因为最后一项的max是null，其实也可以写999就不用单独判断了，因为输入框限制了3位，最大999range = last.key} else if (num === 0) {//判断为0，因为没有哪一项年龄阶段是0的，做下保护range = 1} else {range = findAgeRange(num, unit)}ageRange = range}function ageInput(e) {const val = e.target.valueif (/^\d+$/.test(val)) {// 正则判断满不满足输入条件，其实可以做更详细，例如开头不能为0，只能输入数字getAgeRange(val, ageUnit)}}function ageUnitChange(val) {if (/^\d+$/.test(ageNumber)) {getAgeRange(ageNumber, val)}}
如果觉得《js 输入年龄判断年龄阶段》对你有帮助，请点赞、收藏，并留下你的观点哦！
