首页 > 其他分享 >「云之家个性化开发」将客户输入的身份证中的出生年月性别提取出来赋值到当前页面的控件上

「云之家个性化开发」将客户输入的身份证中的出生年月性别提取出来赋值到当前页面的控件上

时间:2024-11-20 17:42:48浏览次数:3  
标签:控件 const idCard 身份证号 result 出生年月 性别 云之家

将客户输入的身份证中的出生年月性别提取出来赋值到当前页面的控件上

场景

入职填写身份证号时,输入身份证号,自动填充出生年月性别

模板配置

image.png

个性化代码块示例代码

<script type="text/javascript">
    // 解析身份证号的函数
    function parseIdCard(idCard) {
        // 校验身份证号的长度
        if (idCard.length !== 18) {
            return null;
        }

        // 分别提取身份证号中的年月日和顺序码
        const year = idCard.substring(6, 10);
        const month = idCard.substring(10, 12);
        const day = idCard.substring(12, 14);
        const orderCode = idCard.substring(14, 17);

        // 解析性别
        const genderCode = parseInt(orderCode) % 2 === 0 ? '女' : '男';

        // 解析出生日期
        const birthday = `${year}/${month}/${day}`;

        // 返回结果
        return {
            birthday: birthday,
            gender: genderCode
        };
    }

    cf.ready(function(){
        // 监听身份证号的改变,在改变的回调函数中解析身份证号,从中解析出性别和出生年月
        cf.form.subscribeFieldValueChange("Nu_0", function (idCardString) {
            const result = parseIdCard(idCardString);
            if (result === null) {
                console.log('无效的身份证号');
            } else {
                // 解析成功 将出生年月和性别分别赋值给表单上的对应控件

                // 赋值出生年月
                console.log(`出生日期:${result.birthday}`);
                cf.form.setFieldValue("Da_0", new Date(result.birthday).getTime())
                // 赋值性别
                console.log(`性别:${result.gender}`);
                cf.form.setFieldValue("Te_0", result.gender)
            }
        })
    })
</script>

运行时效果

效果.gif

欢迎关注我的个人公众号「「小枫学幽默」」一起成长,一起分享生活!!

在这里插入图片描述

标签:控件,const,idCard,身份证号,result,出生年月,性别,云之家
From: https://blog.csdn.net/piaolingfeixue260/article/details/143921586

相关文章

  • 界面控件DevExpress WPF中文教程:网格视图数据布局的列和卡片字段
    DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。无论是Office办公软件的衍伸产品,还是以数据为中心......
  • 界面控件DevExpress WinForms v24.2新功能预览 - 支持.NET 9
    DevExpressWinForms 拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任!获取DevExpressWinFormsv24.1正式版下载本......
  • 100 款支持 .NET 多版本的强大 WPF 控件库
    前言推荐一款集成了超过100款控件的流行XAML控件库,同时提供了一系列常用的.NET帮助类-CookPopularUI。它可以简化开发流程,让我们能够更加专注于核心业务逻辑的实现。让我们一起学习如何使用CookPopularUI,并详细了解其提供的丰富控件内容。项目介绍CookPopularUI不仅提供......
  • 界面控件DevExpress WinForms v24.2新功能预览 - 支持.NET 9
    DevExpressWinForms 拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任!获取DevExpressWinFormsv24.1正式版下载DevEx......
  • 移动端 html 关闭遮罩层时,禁止遮罩层下面层的控件获取焦点
    在移动端开发中,当你想要在关闭遮罩层时阻止底部控件获得焦点,可以通过设置遮罩层的 touchAction 属性为 none 来禁止触摸事件,或者在遮罩层上添加一个透明的事件拦截层。以下是一个示例代码,展示了如何在关闭遮罩层时阻止底部控件获得焦点:HTML:<divid="overlay"style="disp......
  • 天地图 地图选择控件默认选中卫星混合
    参考1https://www.cnblogs.com/hjyjack9563-bk/p/16363947.html参考2https://www.tianditu.gov.cn/->开发资源->Web端开发->JavaScriptAPI4.0->类参考->控件类->Control.MapType,Control.TMapTypeControlOptions->代码示例this.T=window.T;......
  • 界面控件DevExpress Blazor UI v24.1新版亮点 - 全新PDF Viewer等组件
    DevExpress BlazorUI组件使用了C#为BlazorServer和BlazorWebAssembly创建高影响力的用户体验,这个UI自建库提供了一套全面的原生BlazorUI组件(包括PivotGrid、调度程序、图表、数据编辑器和报表等)。DevExpress Blazor控件目前已经升级到v24.1版本了,此版本发布了全新的PDF......
  • 界面控件DevExpress Blazor UI v24.1新版亮点 - 全新PDF Viewer等组件
    DevExpress BlazorUI组件使用了C#为BlazorServer和BlazorWebAssembly创建高影响力的用户体验,这个UI自建库提供了一套全面的原生BlazorUI组件(包括PivotGrid、调度程序、图表、数据编辑器和报表等)。DevExpress Blazor控件目前已经升级到v24.1版本了,此版本发布了全新的PDF查......
  • layui-laydate时间日历控件详细示例
     layui下载地址:http://www.layui.com/此控件可使用layui或者独立版的layDate,两者初始化有些不同1.在layui模块中使用layui.code<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>layDate快速使用</title><linkrel="stylesheet"......
  • 界面控件Kendo UI for Angular中文教程:如何构建带图表的仪表板?(一)
    KendoUIforAngularListView可以轻松地为客户端设置一个带有图表列表的仪表板,包括分页、按钮选项、数字或滚动,以及在没有更多项目要显示时的通知等。KendoUIforAngular是专用于Angular开发的专业级Angular组件。telerik致力于提供纯粹的高性能AngularUI组件,无需任何jQuery......