vue3+Element Plus,实现输入身份证号计算出出生日期、年龄和性别

代码如下

 
    
        
    
    
        
    
    
        
    
    
        
    
  
import {ref,reactive} from 'vue'
const formInfo = reactive({
    idNumber: '',
    birthday: '',
    age: 0,
    sex: ''
})
// 身份证号正则表达式
const IdNumberRule = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/
// 身份证号校验规则
const checkIdNumber = (rule, value, callback) => {
    if (value === '') {
        callback('请输入身份证号')
    } else {
        if (IdNumberRule.test(value)) {
            // 验证通过则根据身份证号得到出生日期、年龄和性别
            getBirthdayByIdNumber(value)
            callback()
        } else {
            callback(new Error('请输入正确的身份证号'))
        }
    }
}
const rules = {
    idNumber: [{ validator: checkIdNumber, trigger: 'blur' }]  // 身份证号 自定义校验
}
// 根据身份证号得到出生日期、年龄和性别
function getBirthdayByIdNumber(number) {
    // console.log('身份证号', number)
    // 提取出生日期
    var birthday = number.substring(6, 14)
    var year = birthday.substring(0, 4)
    var month = birthday.substring(4, 6)
    var day = birthday.substring(6, 8)
    // 计算年龄
    var myDate = new Date()
    var currentYear = myDate.getFullYear()  // 本年
    var currentMonth = myDate.getMonth() + 1  // 本月
    var currentDay = myDate.getDate()      // 本日
    var age = currentYear - parseInt(year) - 1 // 年龄
    // 如果出生年月日比当前日期小,则年龄+1
    if (parseInt(month) < currentMonth || parseInt(month) == currentMonth && parseInt(day) <= currentDay) {
        age++
    }
    birthday = year + '-' + month + '-' + day  // 出生日期
    // 判断性别
    var sex = ''
    if (number.substr(16, 1) % 2 == 1) {
        sex = '男'
    } else {
        sex = '女'
    }
    // 出生日期、年龄、性别分别赋值给表单对应输入域
    formInfo.birthday = birthday
    formInfo.age = age
    formInfo.sex = sex
}

你可能感兴趣的:(vue.js,elementui,javascript)