JS身份证省市二级联动代码JS(无数据库相当的方便)资源-CSDN文库

共1个文件

html：1个

5星 · 超过95%的资源需积分: 10 37 浏览量 2011-03-25 11:05:48 上传评论收藏 5KB RAR 举报

在网页开发中，有时我们需要实现一个功能，当用户输入身份证号码时，自动填充或选择对应的省市区信息。这种功能称为“身份证省市二级联动”。这里提到的"JS身份证省市二级联动代码"是一个JavaScript实现的解决方案，它不需要依赖任何数据库，因此在部署和使用上相当便捷。我们来理解什么是“身份证省市二级联动”。中国的身份证号码包含了持证人的出生日期、性别以及出生地等信息。其中，身份证号码的第6位到第14位是出生日期，第15位到第17位是顺序码，第18位是校验码。而第17位的奇偶性可以判断性别。至于出生地，第17位至第20位代表的是地级市，第21位至第22位代表的是县级区划代码。所以，通过身份证号码的前6位，我们可以获取到持证人的大致出生地信息。 JS身份证省市二级联动代码就是利用这一特性，通过预先定义好的省市区数据（通常为JSON格式），根据输入的身份证前6位，动态展示相应的省份和城市供用户选择。这样不仅提高了用户体验，也减少了用户输入错误的可能性。实现这个功能主要涉及以下几个关键点： 1. **数据结构**：需要预先准备一个包含所有省份和对应城市的JSON对象，每个省份下有其下属的城市列表，如： ```json { "110000": { "name": "北京市", "cities": { "110100": "市辖区", ... } }, ... } ``` 2. **事件监听**：监听身份证号输入框的`input`或`change`事件，当用户输入身份证号时，触发计算和更新省份和城市的选择。 3. **身份证号码解析**：提取身份证号的前6位，作为省份的标识，查找对应的省份数据。 4. **动态渲染**：根据找到的省份数据，更新城市选择框的内容，显示对应的可选项。 5. **优化体验**：可以添加错误处理，当用户输入的身份证号无效时，给出提示。同时，为了提高响应速度，可以使用缓存或者懒加载策略，避免一次性加载全部省市区数据。 6. **界面交互**：确保选择框的样式与页面整体风格一致，提供良好的视觉反馈。在这个压缩包中的"JS身份证省市二级联动代码JS(无数据库相当的方便).html"文件，应该包含了实现这个功能的HTML、CSS和JavaScript代码。打开这个文件，你可以看到具体的实现方式，包括如何组织数据，如何编写事件监听和DOM操作等。通过阅读和理解这个代码，你可以掌握一种实用的前端技术，为你的项目增添便利。

资源推荐

资源详情

资源评论

收起资源包目录

JS身份证省市二级联动代码JS(无数据库相当的方便).rar （1个子文件）

JS身份证省市二级联动代码JS(无数据库相当的方便).html 12KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>阿桑心大圣</title> <script src="../../js/jquery-1.4.2.js" type="text/javascript"></script> <script language="javascript"> var powers=new Array("7","9","10","5","8","4","2","1","6","3","7","9","10","5","8","4","2"); var parityBit=new Array("1","0","X","9","8","7","6","5","4","3","2"); var sex="male"; //校验身份证号码的主调用 function validId(obj){ var _id=obj.value; if(_id=="")return; var _valid=false; if(_id.length==15){ _valid=validId15(_id); }else if(_id.length==18){ _valid=validId18(_id); } if(!_valid){ alert("身份证号码有误,请检查!"); obj.focus(); return; } //设置性别 var sexSel=document.getElementById("sex"); var options=sexSel.options; for(var i=0;i<options.length;i++){ if(options[i].value==sex){ options[i].selected=true; break; } } } //校验18位的身份证号码 function validId18(_id){ _id=_id+""; var _num=_id.substr(0,17); var _parityBit=_id.substr(17); var _power=0; for(var i=0;i< 17;i++){ //校验每一位的合法性 if(_num.charAt(i)<'0'||_num.charAt(i)>'9'){ return false; break; }else{ //加权 _power+=parseInt(_num.charAt(i))*parseInt(powers[i]); //设置性别 if(i==16&&parseInt(_num.charAt(i))%2==0){ sex="female"; }else{ sex="male"; } } } //取模 var mod=parseInt(_power)%11; if(parityBit[mod]==_parityBit){ return true; } return false; } //校验15位的身份证号码 function validId15(_id){ _id=_id+""; for(var i=0;i<_id.length;i++){ //校验每一位的合法性 if(_id.charAt(i)<'0'||_id.charAt(i)>'9'){ return false; break; } } var year=_id.substr(6,2); var month=_id.substr(8,2); var day=_id.substr(10,2); var sexBit=_id.substr(14); //校验年份位 if(year<'01'||year >'90')return false; //校验月份 if(month<'01'||month >'12')return false; //校验日 if(day<'01'||day >'31')return false; //设置性别 if(sexBit%2==0){ sex="female"; }else{ sex="male"; } return true; } //--> function asaa(){ alert($("#cord").val()+'----------'+$("#sex").val()); } function Dsy() { this.Items = {}; } Dsy.prototype.add = function(id,iArray) { this.Items[id] = iArray; } Dsy.prototype.Exists = function(id) { if(typeof(this.Items[id]) == "undefined") return false; return true; } function change(v){ var str="0"; for(i=0;i<v;i++){ str+=("_"+(document.getElementById(s[i]).selectedIndex-1));}; var ss=document.getElementById(s[v]); with(ss){ length = 0; options[0]=new Option(opt0[v],opt0[v]); if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v) { if(dsy.Exists(str)){ ar = dsy.Items[str]; for(i=0;i<ar.length;i++)options[length]=new Option(ar[i],ar[i]); if(v)options[1].selected = true; } } if(++v<s.length){change(v);} } } var dsy = new Dsy(); dsy.add("0",["北京市","天津市","河北省","山西省","内蒙古","辽宁省","吉林省","黑龙江省","上海市","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","广西自治区","海南省","重庆市","四川省","贵州省","云南省","西藏自治区","陕西省","甘肃省","青海省","宁夏回族自治区","新疆维吾尔自治区","香港特别行政区","澳门特别行政区","台湾省","其它"]); dsy.add("0_0",["北京","东城区","西城区","崇文区","宣武区","朝阳区","丰台区","石景山区"," 海淀区（中关村）","门头沟区","房山区","通州区","顺义区","昌平区","大兴区","怀柔区","平谷区","密云县","延庆县","其他"]); dsy.add("0_1",["和平区","河东区","河西区","南开区","红桥区","塘沽区","汉沽区","大港区","西青区","津南区","武清区","蓟县","宁河县","静海县","其他"]); dsy.add("0_2",["石家庄市","张家口市","承德市","秦皇岛市","唐山市","廊坊市","衡水市","沧州市","邢台市","邯郸市","保定市","其他"]); dsy.add("0_3",["太原市","朔州市","大同市","长治市","晋城市","忻州市","晋中市","临汾市","吕梁市","运城市","其他"]); dsy.add("0_4",["呼和浩特市","包头市","赤峰市","呼伦贝尔市","鄂尔多斯市","乌兰察布市","巴彦淖尔市","兴安盟","阿拉善盟","锡林郭勒盟","其他"]); dsy.add("0_5",["沈阳市","朝阳市","阜新市","铁岭市","抚顺市","丹东市","本溪市","辽阳市","鞍山市","大连市","营口市","盘锦市","锦州市","葫芦岛市","其他"]); dsy.add("0_6",["长春市","白城市","吉林市","四平市","辽源市","通化市","白山市","延边朝鲜族自治州","其他"]); dsy.add("0_7",["哈尔滨市","七台河市","黑河市","大庆市","齐齐哈尔市","伊春市","佳木斯市","双鸭山市","鸡西市","大兴安岭地区(加格达奇)","牡丹江","鹤岗市","绥化市 ","其他"]); dsy.add("0_8",["黄浦区","卢湾区","徐汇区","长宁区","静安区","普陀区","闸北区","虹口区","杨浦区","闵行区","宝山区","嘉定区","浦东新区","金山区","松江区","青浦区","南汇区","奉贤区","崇明县","其他"]); dsy.add("0_9",["南京市","徐州市","连云港市","宿迁市","淮安市","盐城市","扬州市","泰州市","南通市","镇江市","常州市","无锡市","苏州市","其他"]); dsy.add("0_10",["杭州市","湖州市","嘉兴市","舟山市","宁波市","绍兴市","衢州市","金华市","台州市","温州市","丽水市","其他"]); dsy.add("0_11",["合肥市","宿州市","淮北市","亳州市","阜阳市","蚌埠市","淮南市","滁州市","马鞍山市","芜湖市","铜陵市","安庆市","黄山市","六安市","巢湖市","池州市","宣城市","其他"]); dsy.add("0_12",["福州市","南平市","莆田市","三明市","泉州市","厦门市","漳州市","龙岩市","宁德市","其他"]); dsy.add("0_13",["南昌市","九江市","景德镇市","鹰潭市","新余市","萍乡市","赣州市","上饶市","抚州市","宜春市","吉安市","其他"]); dsy.add("0_14",["济南市","聊城市","德州市","东营市","淄博市","潍坊市","烟台市","威海市","青岛市","日照市","临沂市","枣庄市","济宁市","泰安市","莱芜市","滨州市","菏泽市","其他"]); dsy.add("0_15",["郑州市","三门峡市","洛阳市","焦作市","新乡市","鹤壁市","安阳市","濮阳市","开封市","商丘市","许昌市","漯河市","平顶山市

评论收藏

内容反馈