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

简介: 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 事件:

 <el-form-item label="证件号码">
            <el-input
              v-model="addFroms.idcard"
              autocomplete="off"
              maxlength="18"
              placeholder="请输入证件号码"
              @input="sfzhChange"
            />
          </el-form-item>

三.

 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 = "女";
    }
  } 
};

效果


相关文章
|
JavaScript
VUE element-ui之上传身份证照片正反面详细代码
VUE element-ui之上传身份证照片正反面详细代码
1640 0
VUE element-ui之上传身份证照片正反面详细代码
|
定位技术 Android开发
uniapp获取wifi连接状态
uniapp获取wifi连接状态
1060 0
|
算法 网络架构
router和route的区别?
router和route的区别?
877 0
|
存储 前端开发 数据库
electron项目中使用本地数据库sqlite3和sequelize框架
electron项目中使用本地数据库sqlite3和sequelize框架
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
464 2
element-ui table排序sortable三种状态,怎么去掉默认状态
在 element-ui 中,也定义了 sort-orders 有三种状态: ascending、descending、null,这三种状态形成一个循环切换。
3246 0
|
11月前
|
JavaScript 前端开发 编译器
将 CommonJS 模块转换为 ES6 模块
【10月更文挑战第11天】 将 CommonJS 模块转换为 ES6 模块有三种主要方法:手动修改代码、使用工具(如 Babel)自动转换和逐步迁移。手动修改涉及导出和导入方式的转换,确保名称和结构一致;使用工具可自动化这一过程;逐步迁移适用于大型项目,先在新模块中使用 ES6 语法,再逐步替换旧模块。转换过程中需注意兼容性、代码逻辑调整和充分测试。
699 58
|
JavaScript
Vue3上传(Upload)
这是一个基于 Vue 3 的文件上传组件,提供了丰富的自定义选项,包括接受的文件类型、是否支持多选文件、上传数量限制、预览图片缩放规则等。组件还集成了多种功能,如拖拽上传、预览图片、自定义上传行为等,并支持不同类型的文件预览图标。组件使用了 `Space`、`Spin`、`Image` 和 `Message` 等子组件来实现多样化的布局和交互效果。此外,通过 `beforeUpload` 钩子可以对上传文件进行预处理,如限制文件大小和类型。整体设计简洁实用,适用于多种应用场景。
364 1
Vue3上传(Upload)
|
网络安全
mac下通过ssh脚本实现免账号密码连接运服务器
mac下通过ssh脚本实现免账号密码连接运服务器
147 3
在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件
本文介绍了如何在Vue3项目中使用`vue3-seamless-scroll`插件实现无缝滚动效果,并提供了详细的示例代码和运行效果。
5247 0