根据身份证号码获取性别、出生日期、籍贯省市的js示例

共2个文件

htm：1个

js：1个

5星 · 超过95%的资源需积分: 30 9 浏览量 2010-06-11 14:05:23 上传评论 9 收藏 28KB RAR 举报

在JavaScript编程中，有时我们需要根据用户的输入，如身份证号码，来自动填充其他相关信息，例如性别、出生日期以及籍贯的省市。这样的功能可以提高用户体验，减少用户手动输入的步骤。以下是一个关于如何实现这一功能的知识点详细说明： 1. **身份证号码结构**：中国的身份证号码由18位数字组成，前6位代表行政区划代码，第7到14位是出生日期（格式为YYYYMMDD），第15和16位是顺序码，第17位表示性别（奇数为男性，偶数为女性），最后一位是校验码。 2. **性别判断**：从身份证号码的第17位可以获取性别信息。如果该位数字是奇数，则表示性别为男；如果是偶数，则表示性别为女。可以通过JavaScript的模运算符 `%` 来实现这个判断。 3. **出生日期解析**：身份证号码的第7到14位是出生日期的数字形式，可以通过将这些数字拼接成字符串，然后使用`Date`对象进行解析，转换为日期格式（如'YYYY-MM-DD'）。 4. **籍贯省市县获取**：前6位是行政区划代码，可以分为两部分，前2位代表省份，中间2位代表城市，最后2位代表县或区。可以结合中国行政区域代码的数据库，通过这6位数字查找对应的省、市、县名称。这通常需要一个预先整理好的地区代码映射表，或者使用API接口查询。 5. **HTML页面设计**：创建一个简单的HTML页面，包括身份证号码输入框、性别显示区域、出生日期显示区域以及籍贯的省市县显示区域。可以使用`<input>`标签创建文本框，用`<span>`或`<p>`标签显示结果。 6. **JavaScript实现**：在JS文件中编写函数，监听身份证号码输入框的`oninput`事件。当输入发生改变时，调用该函数，根据上述逻辑解析身份证号码并更新相应的显示区域。 7. **事件处理**：在JavaScript中，可以使用`addEventListener`方法添加事件监听器，例如： ```javascript const idInput = document.getElementById('id-input'); const genderDisplay = document.getElementById('gender-display'); const birthDateDisplay = document.getElementById('birth-date-display'); const nativePlaceDisplay = document.getElementById('native-place-display'); idInput.addEventListener('input', () => { const idNumber = idInput.value; // 这里进行性别、出生日期、籍贯的解析和更新显示 }); ``` 8. **错误处理**：考虑到用户输入可能存在错误，应在解析过程中加入验证，确保输入的身份证号码符合18位格式，并且校验码正确。如果输入无效，应给出相应提示。 9. **可配置性**：根据需求，可以将要获取的项目作为函数参数，使得该函数更加灵活，适应不同的应用场景。通过以上步骤，我们可以实现一个根据身份证号码自动填充性别、出生日期和籍贯省市的JavaScript示例。这个示例不仅提升了用户体验，还展示了JavaScript在处理数据和交互方面的强大能力。在实际开发中，可能还需要考虑兼容性、性能优化等问题，以确保功能在各种环境下都能稳定运行。

资源推荐

资源详情

资源评论

收起资源包目录

根据身份证号码获取性别、出生日期、籍贯省市.rar （2个子文件）

根据身份证号码获取性别、出生日期、籍贯省市

GetInfoFromIdcard.js 96KB

GetInfoFromIdcard.htm 3KB

<HTML> <HEAD> <title>根据身份证号码获取性别、出生日期、籍贯省、籍贯市、籍贯区县</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="javascript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <script type="text/javascript" src="GetInfoFromIdcard.js" charset="GB2312"></script> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <table > <tr><td align="left">身份证号码<input type="text" id="_idcard" /> <br/>性别<input type="text" id="_sex"/> <br/>出生日期<input type="text" id="_birthday"/> <br/>籍贯省<input type="text" id="_province"/> <br/>籍贯市<input type="text" id="_city"/> <br />籍贯区县<input type="text" id="_county"/> <select id="ctl00_PageBody_XB_Input"> <option value="男">男</option> <option value="女">女</option> </select> </td></tr> </table> </form> <script language="javascript"> /** * get_info_from_idcard_extension(_idcard,_sex,_birthday,_province,_city,_county); * 根据身份证号码获取性别，出生日期，籍贯省，籍贯市，籍贯县 * 参数1，_idcard，输入的证件号码，必须输入的项目 * 参数2，_sex，性别页面元素id，可选项。该参数不为空，则将结果赋值给该id对应的元素；不需要获取性别，该参数为'' * 参数3，_birthday，出生日期页面元素id，可选项。该参数不为空，则将结果赋值给该id对应的元素；不需要获取出生日期，该参数为'' * 参数4，_province，籍贯省页面元素id，可选项。该参数不为空，则将结果赋值给该id对应的元素；不需要获取籍贯省，该参数为'' * 参数5，_city，籍贯市页面元素id，可选项。该参数不为空，则将结果赋值给该id对应的元素；不需要获取籍贯市，该参数为'' * 参数6，_county，籍贯县页面元素id，可选项。该参数不为空，则将结果赋值给该id对应的元素；不需要获取籍贯县，该参数为'' * 使用方法，参数一为身份证号码，其它参数为可选项 * 如只获取性别，get_info_from_idcard('_idcard','_sex','','','',''); * 如同时获取性别、出生日期，get_info_from_idcard('_idcard','_sex','_birthday','','',''); * 如同时获取性别、出生日期、籍贯省、籍贯市、籍贯县，get_info_from_idcard_extension('_idcard','_sex','_birthday','_province','_city','_county'); */ document.getElementById('_idcard').onchange = function (event) { get_info_from_idcard_extension(event,this,'_idcard','_sex','_birthday','_province','_city','_county');//设置文本框的值 select_choose_by_text('ctl00_PageBody_XB_Input','_idcard');//设置下拉框的选定项,参数1，ctl00_PageBody_XB_Input，性别下拉框id；参数2，_idcard，身份证文本框id }; </script> </body> </HTML>

评论收藏

内容反馈