当前位置： 首页 > news >正文

react身份证回显

news 来源：原创 2025/6/12 19:37:43
1. 处理身份证号的函数
function getAgeSexAndBirthdate(idCard: string): { sex: '男' | '女' | null; birthdate: Date | null } {if (idCard.length !== 18) {console.error('身份证号码必须是18位。');return { sex: null, birthdate: null };}// 提取出生年月日const year = parseInt(idCard.substring(6, 10));const month = parseInt(idCard.substring(10, 12));const day = parseInt(idCard.substring(12, 14));const birthDate = new Date(year, month - 1, day); // 注意月份是从0开始的// 判断性别const sex = parseInt(idCard.charAt(16)) % 2 === 0 ? '女' : '男';return { sex, birthdate: birthDate };
}

思路：

  • 根据身份证号的第7到14位提取出生日期。
  • 根据身份证号的第17位判断性别。
2. 监听身份证号变化的函数
function handleIdCardChange(e) {const newIdCard = e.target.value;const { sex: newSex, birthdate: newBirthdate } = getAgeSexAndBirthdate(newIdCard);if (newBirthdate != null) {const dateStart = newBirthdate;const birthdayHappy = `${dateStart.getFullYear()}-${String(dateStart.getMonth() + 1).padStart(2, '0')}-${String(dateStart.getDate()).padStart(2, '0')}`;setFormattedDateStart(birthdayHappy); // 生日输入框赋值console.log(newSex, formattedDateStart);setSex(newSex || '');setBirthdate(formattedDateStart || '');}
}

思路：

  • 当身份证号输入框发生变化时触发此函数。
  • 调用getAgeSexAndBirthdate函数计算出性别和出生日期。
  • 将计算结果更新到对应的state中，并设置到表单项中。
3. 在表单中绑定身份证号输入框
<Form.Item name="idcard"><inputtype="text"defaultValue={form.getFieldValue('idcard')}onChange={handleIdCardChange} // 绑定身份证号变化事件requireddisabledstyle={{width: '100%',fontSize: '14px',borderRadius: '5px',border: '1px solid #ccc'}}/>
</Form.Item>

思路：

  • 在身份证号输入框上绑定onChange事件，当输入框内容改变时会触发handleIdCardChange函数。
4. 设置性别和生日到表单项
form.setFieldsValue({...sex: sex, // 性别birthday: moment(birthdate), // 生日...
});

思路：

  • 在展示详情时，根据身份证号计算出的性别和生日设置到表单项中，以便回显。

这些代码片段共同实现了从身份证号自动解析出性别和出生日期，并将其回显到表单中的功能。

相关文章：

react身份证回显

1. 处理身份证号的函数 function getAgeSexAndBirthdate(idCard: string): { sex: 男 | 女 | null; birthdate: Date | null } {if (idCard.length ! 18) {console.error(身份证号码必须是18位。);return { sex: null, birthdate: null };}// 提取出生年月日const year parse…...

编程日记 2025/6/4 15:47:47

Hibernate、JPA、Spring DATA JPA、Hibernate 代理和架构

大家好&#xff0c;今天&#xff0c;我们将讨论 Hibernate 和 JPA 架构。 在开始我们的文章之前&#xff0c;我想回答一个重要的问题&#xff1a;为什么我们需要使用 Hibernate、Eclipse Link、EF core 等 ORM 工具&#xff1f; 事实上&#xff0c;这是一个非常好的问题。我们…...

编程日记 2025/6/2 19:03:58

leetcode----mysql

1179. 重新格式化部门表 - 力扣&#xff08;LeetCode&#xff09; 表 Department&#xff1a; ------------------------ | Column Name | Type | ------------------------ | id | int | | revenue | int | | month | varchar | ----…...

编程日记 2025/6/3 19:54:42

盛元广通畜牧与水产品检验技术研究所LIMS系统

一、系统概述 盛元广通畜牧与水产品检验技术研究所LIMS系统集成了检测流程管理、样品管理、仪器设备管理、质量控制、数据记录与分析、合规性管理等功能于一体&#xff0c;能够帮助实验室实现全流程的数字化管理。在水产、畜牧产品的质检实验室中&#xff0c;LIMS系统通过引入…...

编程日记 2025/6/2 19:04:58

EXCEL文件解析

[Excel文件名].xlsx (解压后) │ ├── _rels │ └── .rels (定义关系文件) ├── docProps │ ├── app.xml (应用程序属性) │ └── core.xml (核心文档属性) ├── xl │ ├── _rels │ │ └── workbook.xml.rels (工作簿关系文件) │ ├── …...

编程日记 2025/6/2 19:03:28

【C++】- 掌握STL List类：带你探索双向链表的魅力

文章目录 前言&#xff1a;一.list的介绍及使用1. list的介绍2. list的使用2.1 list的构造2.2 list iterator的使用2.3 list capacity2.4 list element access2.5 list modifiers2.6 list的迭代器失效 二.list的模拟实现1. list的节点2. list的成员变量3.list迭代器相关问题3.1…...

编程日记 2025/6/1 20:25:39

开源 AI 智能名片 S2B2C 商城小程序中运营与产品的关系剖析

摘要&#xff1a;本文聚焦于开源 AI 智能名片 S2B2C 商城小程序&#xff0c;深入探讨其中运营与产品之间的关系。通过分析运营与产品的多种关系认知&#xff0c;阐述在该特定小程序情境下运营与产品相互依存、相互作用的机制&#xff0c;包括运营对产品的需求以及产品对运营的依…...

编程日记 2025/6/3 19:31:00

flask_socketio 以继承 Namespace方式实现一个网页聊天应用

点击进入上一篇&#xff0c;可作为参考 实验环境 python 用的是3.11.11 其他环境可以通过这种方式一键安装&#xff1a; pip install flask3.1.0 Flask-SocketIO5.4.1 gevent-websocket0.10.1 -i https://mirrors.tuna.tsinghua.edu.cn/pypi/web/simple pip list 详情如下&am…...

编程日记 2025/6/2 19:02:58

DePIN潜力项目Spheron解读：激活闲置硬件，赋能Web3与AI

DePIN赛道作为今年加密资本关注的热点之一&#xff0c;不仅吸引了大量资金涌入&#xff0c;还凭借其灵活的资源调配、高效的运作方式和可靠的安全性能&#xff0c;逐渐渗透到多个领域和项目中。例如&#xff0c;Helium的无线网络协议、IoTeX的去中心化物联网、IO NET的去中心化…...

编程日记 2025/6/2 18:57:28

《Vue进阶教程》第十六课：深入完善响应式系统之单例模式

往期内容&#xff1a; 《Vue进阶教程》第五课&#xff1a;ref()函数详解(重点) 《Vue进阶教程》第六课&#xff1a;computed()函数详解(上) 《Vue进阶教程》第七课&#xff1a;computed()函数详解(下) 《Vue进阶教程》第八课&#xff1a;watch()函数的基本使用 《Vue进阶教…...

编程日记 2025/6/2 19:04:58

C++ —— const修饰指针

C —— const修饰指针 常量指针&#xff08;实际开发中用的很多&#xff09;指针常量&#xff08;了解即可&#xff09;常指针常量&#xff08;了解即可&#xff09; 常量指针&#xff08;实际开发中用的很多&#xff09; 语法&#xff1a;const 数据类型 *变量名; 不能通过解…...

编程日记 2025/5/27 7:04:35

【学习笔记】数据结构（八）

动态存储管理 文章目录 动态存储管理8.1 概述8.2 可利用空间表及分配方法8.3 边界标识法8.3.1 可利用空间表的结构8.3.2 分配算法8.3.3 回收算法 8.4 伙伴系统8.4.1 可利用空间表的结构8.4.2 分配算法8.4.3 回收算法 8.5 无用单元收集 - 垃圾回收机制8.6 存储紧缩 - 内存碎片化…...

编程日记 2025/6/3 21:27:23

maven-resources-production:ratel-fast: java.lang.IndexOutOfBoundsException

Maven生产环境中遇到java.lang.IndexOutOfBoundsException的问题&#xff0c;尝试了重启电脑、重启IDEA等常规方法无效&#xff0c;最终通过直接重建工程解决了问题。 Rebuild Project 再启动OK...

编程日记 2025/5/29 14:16:54

建投数据与腾讯云数据库TDSQL完成产品兼容性互认证

近日&#xff0c;经与腾讯云联合测试&#xff0c;建投数据自主研发的人力资源信息管理系统V3.0、招聘管理系统V3.0、绩效管理系统V2.0、培训管理系统V3.0通过腾讯云数据库TDSQL的技术认证&#xff0c;符合腾讯企业标准的要求&#xff0c;产品兼容性良好&#xff0c;性能卓越。 …...

编程日记 2025/6/4 9:56:27

后端-添加购物车和查看购物车

...

编程日记 2025/6/1 12:43:03

【HarmonyOS NEXT】Web 组件的基础用法以及 H5 侧与原生侧的双向数据通讯

关键词&#xff1a;鸿蒙、ArkTs、Web组件、通讯、数据 官方文档Web组件用法介绍&#xff1a;文档中心 Web 组件加载沙箱中页面可参考我的另一篇文章&#xff1a;【HarmonyOS NEXT】 如何将rawfile中文件复制到沙箱中_鸿蒙rawfile 复制到沙箱-CSDN博客 目录 如何在鸿蒙应用中加…...

编程日记 2025/6/1 10:48:36

7-2 排序

输入一批未排序的数据&#xff0c;数量不超过30个&#xff0c;请使用选择法或者冒泡法对其排序&#xff0c;并按照规定的要求输出。 输入格式: 先输入待排序的整形数的个数&#xff1b;然后输入所有的待排序的数据。 输出格式: 在一行中按照由大到小的顺序输出排序好的数据…...

编程日记 2025/6/3 2:14:26

Java通过反射破坏单例模式

有个第三方工具类&#xff0c;不支持多例模式。但是又不能直接改第三方工具类的代码&#xff0c;因此可以通过反射破坏第三方工具类的单例。 第三方工具类反编译如下 可以看到构造函数进行了私有化&#xff0c;不允许外部new&#xff0c;只能通过newInstance进行实例化。并且…...

编程日记 2025/6/3 2:34:23

FFmpeg第一话：FFmpeg 简介与环境搭建

FFmpeg 探索之旅 一、FFmpeg 简介与环境搭建 二、FFmpeg 解码详解 第一话&#xff1a;FFmpeg 简介与环境搭建 FFmpeg 探索之旅一、前言二、FFmpeg 是什么&#xff1f;三、简单介绍其历史背景四、为什么用 C学习 FFmpeg&#xff1f;&#xff08;一&#xff09;高性能优势&#…...

编程日记 2025/6/2 10:26:53

C++并发编程： std::atomic对指针进行操作

std::atomic 对指针进行运算的用途 std::atomic 提供了一种在多线程环境中安全地操作指针的方法。这对于实现线程安全的指针管理、动态内存分配、链表操作等场景非常有用。通过使用std::atomic对指针进行运算&#xff0c;可以确保指针操作的原子性和多线程安全性。 常见用途 …...

编程日记 2025/6/3 10:09:17

工业大数据分析算法实战-day08

文章目录 day08模型评价聚类算法基于距离的聚类基于层次的聚类基于密度的聚类基于分布的聚类聚类结果的评价 day08 今天是第8天&#xff0c;昨日阐述了概率图模型和集成学习的分类&#xff0c;主要讲解了有向图和无向图&#xff0c;生成式模型和判断式模型&#xff0c;以及集成…...

编程日记 2025/6/1 12:42:53

在 C# 中实现的目录基础操作

前言 在开发应用程序过程中&#xff0c;对操作系统上的文件夹存储文件和子文件夹操作是常见的需求。.NET中的Directory类提供了处理文件目录的功能。本文介绍如何读取文件夹的属性、获取文件夹的大小及文件个数、创建文件夹、遍历文件夹中的所有文件、移动文件夹和删除文件夹等…...

编程日记 2025/5/30 10:56:57

​Python 标识符是啥？​

Python 的标识符就是我们写代码时用来给变量、函数、类等取名字的东西。 你写的 my_variable 是个标识符&#xff0c; 定义的 add_numbers 函数名也是个标识符&#xff0c; 甚至你写的 Cat 类名&#xff0c;也是标识符。 一句话总结&#xff1a;标识符就是代码里给“东西”起…...

编程日记 2025/6/4 11:20:53

WEB开发： 全栈工程师起步 - Python Flask +SQLite的管理系统实现

一、前言 罗马不是一天建成的。 每个全栈工程师都是从HELLO WORLD 起步的。 之前我们分别用NODE.JS 、ASP.NET Core 这两个框架实现过基于WebServer的全栈工程师入门教程。 今天我们用更简单的来实现&#xff1a; Python。 我们将用Python来实现一个学生管理应用&#xff0…...

编程日记 2025/6/4 16:02:26

将 Matplotlib 图形转换为 PIL 图像并返回

将 Matplotlib 图形转换为 PIL 图像并返回 前言完整代码Matplotlib 中 fig 和 ax 的关系示例&#xff1a; 问题分析常见错误及解决方案总结 前言 Matplotlib 是 Python 里最流行的图表展示库&#xff0c;PIL (Python Imaging Library)则是一个强大的图像处理库。在开发过程中&…...

编程日记 2025/6/2 21:34:42

F5中获取客户端ip地址(client ip)

当F5设备对其原始设置上的所有IP地址使用NAT时&#xff0c;连接到poo成员&#xff08;nodes、backend servers&#xff09;的出站连接将是NAT IP地址。 pool 成员&#xff08;nodes、backend servers&#xff09;将无法看到真实的客户端 ip地址&#xff0c;因为看到的是F5上的…...

编程日记 2025/6/3 17:17:50

点焊机器人维修-ABB-KUKA-FANUC-YASKAWA

在正式启用点焊机器人之前&#xff0c;一项至关重要的预备步骤便是进行焊枪的全面设置操作。以FANUC机器人为例&#xff0c;其焊枪的设置流程涵盖了多个关键环节&#xff0c;如焊枪运动方向的精确规划、焊枪规格的选择以及零点标定的细致执行等。这些设置均须严格依据实际所采用…...

编程日记 2025/6/3 13:55:20

springboot448教学辅助系统(论文+源码)_kaic

摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对信息管理混乱&#xff0c;出错率高&#xff0c;信息安全性差&#x…...

编程日记 2025/6/3 2:14:27

网络地址转换(NAT)和端口映射

1. 网络地址转换(NAT) 1.1 NAT的应用场景 &#xff08;1&#xff09;应用场景&#xff1a;允许将私有IP地址映射到公网地址&#xff0c;以减缓IP地址空间的消耗 ①需要连接Internet&#xff0c;但主机没有公网IP地址 ②更换了一个新的ISP&#xff0c;需要重新组织网络时&…...

编程日记 2025/6/2 5:38:02

iClent3D for Cesium 实现无人机巡检飞行效果

作者&#xff1a;gaogy 1、背景 随着地理信息技术的发展&#xff0c;三维地球技术逐渐成为了许多领域中的核心工具&#xff0c;尤其是在城市规划、环境监测、航空航天以及军事领域。三维地图和场景的应用正在帮助人们更加直观地理解空间数据&#xff0c;提供更高效的决策支持。…...

编程日记 2025/6/3 13:24:44

后端- spring cache框架操作缓存数据（底层可以是redis，也可以是caffeine和ehcache）

...

编程日记 2025/6/4 16:16:30

低比特语言模型 是一种利用较少比特数进行语言建模的技术

Vanilla LLM: 基础的全精度语言模型&#xff0c;通常在较高比特数下运作 Vanilla LLM&#xff0c;或称为“基础的全精度语言模型”&#xff0c;是指使用标准的浮点数&#xff08;通常是16位或32位&#xff09;进行训练和推理的语言模型。这些模型依赖于经典的神经网络结构&…...

编程日记 2025/6/2 19:07:49

ES6中的map和set

Set ES6 提供了新的数据结构 Set。它类似于数组&#xff0c;但是成员的值都是唯一的&#xff0c;没有重复的值。 Set本身是一个构造函数&#xff0c;用来生成 Set 数据结构。 以下代码 const s new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x > s.add(x));for (let i of s…...

编程日记 2025/6/2 6:38:29

【WRF安装】WRF编译错误总结1：HDF5库包安装

目录 1 HDF5库包安装有误&#xff1a;HDF5 not set in environment. Will configure WRF for use without.HDF5的重新编译 错误原因1&#xff1a;提示 overflow 错误1. 检查系统是否缺少依赖库或工具2. 检查和更新编译器版本3. 检查 ./configure 报错信息4. 检查系统环境变量5.…...

编程日记 2025/6/3 20:07:31

MyBatis常见面试题总结

#{} 和 ${} 的区别是什么&#xff1f; 注&#xff1a;这道题是面试官面试我同事的。 答&#xff1a; ${}是 Properties 文件中的变量占位符&#xff0c;它可以用于标签属性值和 sql 内部&#xff0c;属于原样文本替换&#xff0c;可以替换任意内容&#xff0c;比如${driver}…...

编程日记 2025/6/3 16:17:41

Qt生成随机数的方法

后台接口要求传个流水单号&#xff0c;流水号的格式是&#xff1a;“设备序列号”“设备MAC地址”“20位的随机数”。 具体的是&#xff1a; “设备序列号”&#xff1a;就是烧录工具写入设备的序列编号&#xff0c;这就不多说了&#xff0c;读出来就行&#xff1b; “设备MAC地…...

编程日记 2025/6/2 21:48:12

深入探索Vue.js中的v-if指令：条件渲染的高级技巧

深入探索Vue.js中的v-if指令&#xff1a;条件渲染的高级技巧 引言 在现代Web开发中&#xff0c;根据条件动态地渲染或移除DOM元素是一个常见的需求。Vue.js提供了一种简洁而强大的方法来实现这一目标&#xff0c;即通过v-if指令来根据表达式的值来控制元素的渲染。本文将详细…...

编程日记 2025/6/1 4:21:59

【记录50】uniapp安装uview插件，样式引入失败分析及解决

SassError: Undefined variable: "$u-border-color". 表示样式变量$u-border-color没定义&#xff0c;实际是定义的 首先确保安装了scss/sass 其次&#xff0c;根目录下 app.vue中是否全局引入 <style lang"scss">import /uni_modules/uview-ui/in…...

编程日记 2025/5/31 10:33:59

NTLMv2 离线爆破

攻击者&#xff08;kali&#xff09;&#xff1a;192.168.72.162 受害者&#xff08;administrator&#xff09;&#xff1a;192.168.72.163 因为 NTLM 身份验证是通过计算正确的挑战值得出的&#xff0c;所以如果我们能获取域用户的 NTLM 认证某一服务的 Net-NTLM v2 Hash …...

编程日记 2025/6/3 0:22:06

LabVIEW实现RFID通信

目录 1、RFID通信原理 2、硬件环境部署 3、程序架构 4、前面板设计 5、程序框图设计 6、测试验证 本专栏以LabVIEW为开发平台，讲解物联网通信组网原理与开发方法，覆盖RS232、TCP、MQTT、蓝牙、Wi-Fi、NB-IoT等协议。 结合实际案例，展示如何利用LabVIEW和常用模块实现物联网系…...

编程日记 2025/6/2 3:24:43

【Three.js基础学习】31.Lights Shading

前言 关于灯光如何在着色器中应用&#xff01; 下面将创建三个灯光 分别是点光源&#xff0c;环境光&#xff0c;方向光通过这几种光应用着色器显示对应阴影 学习灯光阴影&#xff0c;着色器的使用 添加三盏灯 点光&#xff0c;方向光&#xff0c;环境光 创建一个环境光 在现…...

编程日记 2025/6/1 15:59:37

Oracle Database 21c Express Edition数据库 和 Sqlplus客户端安装配置

目录 一. 前置条件二. Win10安装配置Oracle数据库2.1 数据库获取2.2 数据库安装2.3 数据库配置确认2.4 数据库访问 三. Win10配置Oracle数据库可对外访问3.1 打开文件和打印机共享3.2 开放1521端口 四. 端口与地址确认4.1 查看监听器的状态4.2 Win10查看1521端口是否被监听4.3 …...

编程日记 2025/6/4 9:43:07

IDEA搭建springboot demo

如下所示创建SpringBootTest18项目&#xff0c;我选的maven&#xff0c;创建完成项目后&#xff0c;maven会自动下载一些依赖库到maven的repository目录中。 创建的项目结构如下图所示 接下来在项目中加入Framework支持&#xff0c;右击项目&#xff0c;弹出的菜单如下图所示&a…...

编程日记 2025/6/2 22:45:51

SQLite Update 语句

SQLite Update 语句 SQLite 的 UPDATE 语句用于更新数据库表中的现有记录。使用 UPDATE 语句&#xff0c;您可以修改一个或多个列的值。本教程将详细介绍如何使用 SQLite UPDATE 语句&#xff0c;包括语法、示例以及一些最佳实践。 语法 SQLite UPDATE 语句的基本语法如下&a…...

编程日记 2025/6/4 15:15:43

node.js的简单示例

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境&#xff0c;用于方便地构建快速、可扩展的网络应用。下面是一个简单的Node.js示例&#xff0c;它创建了一个简单的HTTP服务器&#xff0c;当访问服务器时&#xff0c;它会响应“Hello World” // 引入Node.js的HTTP模块…...

编程日记 2025/6/1 3:05:15

fpga系列 HDL：Quartus II 时序约束 静态时序分析 (STA) test.out.sdc的文件结构

test.out.sdc的文件结构 ## Generated SDC file "test.out.sdc"## Copyright (C) 1991-2013 Altera Corporation ## Your use of Altera Corporations design tools, logic functions ## and other software and tools, and its AMPP partner logic ## functions,…...

编程日记 2025/6/4 17:18:39

Restaurants WebAPI（一）—— clean architecture

文章目录 项目地址一、Restaurants.Domain 核心业务层1.1 Entities实体层1.2 Repositories 数据操作EF的接口二、Restaurants.Infrastructure 基础设施层2.1 Persistence 数据EF CORE配置2.2 Repositories 数据查询实现2.3 Extensions 服务注册三、Restaurants.Application用例…...

编程日记 2025/6/2 0:38:41

A Unified Framework for STAR-RIS Coefficients Optimization

文章目录 AbstractB. A Penalty-based Reformulation of (1) III. OPTIMIZING AUXILIARY VARIABLES φ \boldsymbol φ φ IN P1IV. A CASE STUDY OF P2 ON DOWNLINK STAR-RIS ASSISTED TRANSMISSION SYSTEMA. 优化 x , ρ , w , λ t x, \rho, \mathbf{w}, \lambda^t x,ρ,w…...

编程日记 2025/6/4 16:29:15

rebase ‘A‘ onto ‘master‘ 和 merge ‘master‘ into ‘A‘有什么区别

在Git版本控制系统中&#xff0c;rebase 和 merge 是两种不同的操作&#xff0c;用于合并分支。rebase A onto master 和 merge master into A 虽然最终目的都是将两个分支的更改合并在一起&#xff0c;但它们在处理方式和结果上有所不同。 rebase ‘A’ onto ‘master’ 含义…...

编程日记 2025/6/2 6:34:27

谷歌发布最新视频生成模型 Veo 2：视频生成AI新王牌

谷歌 在当今数字化快速发展的时代&#xff0c;人工智能视频生成技术正不断突破创新。就在12月17日&#xff0c;谷歌推出了一个新的视频模型 Veo 2 。 Veo 2 Veo 2 Veo 2 可以创建各种主题和风格的高质量视频。在谷歌官方由人工评估员判断中&#xff0c;Veo 2 与领先模型相比取得…...

编程日记 2025/6/4 9:19:39