Vue3-admin-template 框架实现表单身份证获取到 出生年月、性别

一. 首先需效验输入身份证信息是否正确:

const sfzhChange = () => {
  // 效验身份证号格式
  const reg = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
};

二.绑定输入框 input 事件:

 
            
          

三.

 if (reg.test(addFroms.idcard)) {
    //获取出生日期
    addFroms.birthday = addFroms.idcard.substring(6, 10) + '-' + addFroms.idcard.substring(10, 12) + '-' + addFroms.idcard.substring(12, 14);
    //获取性别
    if(addFroms.idcard.substr(16, 1) % 2 == 1){
      addFroms.sex = "男";
    }else{
      addFroms.sex = "女";
    }
  } 

四. 完整代码:

const sfzhChange = () => {
  // 效验身份证号格式
  const reg = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
  if (reg.test(addFroms.idcard)) {
    //获取出生日期
    addFroms.birthday = addFroms.idcard.substring(6, 10) + '-' + addFroms.idcard.substring(10, 12) + '-' + addFroms.idcard.substring(12, 14);
    //获取性别
    if(addFroms.idcard.substr(16, 1) % 2 == 1){
      addFroms.sex = "男";
    }else{
      addFroms.sex = "女";
    }
  } 
};

效果

Vue3-admin-template 框架实现表单身份证获取到 出生年月、性别_第1张图片


原创作者:吴小糖

创作时间:2023.11.16 

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