js实现身份证号查询相关信息
生活随笔
收集整理的這篇文章主要介紹了
js实现身份证号查询相关信息
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML部分
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js實現身份證號查詢相關信息</title> </head> <body><div class="container"><h1>請輸入身份證號碼進行信息查詢</h1><div class="search"><input type="text" placeholder="請輸入查詢信息" maxlength="18" autofocus><input type="submit" value="查詢"></div><table class="msgBody" cellspacing="0"><tr><td>姓名</td><td class="name"></td></tr><tr><td>性別</td><td class="sex"></td></tr><tr><td>出生日期</td><td class="birth"></td></tr><tr><td>所在省份</td><td class="province"></td></tr><tr><td>所在城市</td><td class="city"></td></tr><tr><td>您查詢的身份證號碼</td><td class="card"></td></tr></table></div></body> </html>?css部分
*{padding: 0;margin: 0;text-align: center;font-size: 16px;}.container {width: 800px;height: 500px;border: 1px solid #ccc;margin: 100px auto 0;}.search input {margin-top: 20px;outline: none;text-align: left;text-indent: 20px;}.search input:last-child {width: 50px;text-indent: 0;text-align: center;margin-left: 20px;}h1 {font-size: 24px;margin-top: 20px;}table {width: 600px;height: 350px;border: 1px solid #ccc;margin: 20px auto;}tr td {width: 50%;border: 1px solid #ccc;}?JS部分
<script>var message = document.querySelector("input[type=text]");var submit = document.querySelector("input[type=submit]");var names = document.querySelector(".name");var sex = document.querySelector(".sex");var birth = document.querySelector(".birth");var province = document.querySelector(".province");var city = document.querySelector(".city");var card = document.querySelector(".card");let reg = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/;submit.onclick = function(){getData();if(message.value == ""){alert("查詢信息不能為空!!!");return false;}else if(reg.test(message.value) === false){alert("身份證號碼輸入有誤,請重新輸入!!!");message.value = '';}else {card.innerHTML = message.value;sex.innerHTML = message.value[16]%2==0?"女":"男";birth.innerHTML = `${message.value.slice(6,10)}年${message.value.slice(10,12)}月${message.value.slice(12,14)}日`;}}function getData(){let XHR = new XMLHttpRequest();XHR.open("get","../html/64data.json",true);XHR.onreadystatechange = ((res)=>{if(XHR.readyState == 4 && XHR.status == 200) {var res = JSON.parse(XHR.responseText);for(var i = 0;i<=res.length;i++){// console.log(res[i].code,res[i].province,res[i].city,res[i].name);let pro = message.value.slice(0,2)if(res[i].code == pro){province.innerHTML = res[i].province;city.innerHTML = res[i].city;names.innerHTML = res[i].name;} }}})XHR.send();}document.onkeydown = function(e){// 兼容Firefox和IE和Operavar Event = e || window.event;var code = Event.keyCode || Event.which || Event.charCode;//回車執行查詢if (code == 13) {submit.click();} } </script>?JSON部分
[{"code":"11","province":"北京市","city":"北京","name":"張一"},{"code":"12","province":"天津市","city":"天津","name":"張二"},{"code":"13","province":"河北省","city":"石家莊","name":"張三"},{"code":"14","province":"山西省","city":"太原","name":"張思"},{"code":"15","province":"內蒙古自治區","city":"呼和浩特","name":"張武"},{"code":"21","province":"遼寧省","city":"沈陽","name":"張柳"},{"code":"22","province":"吉林省","city":"長春","name":"張琪"},{"code":"23","province":"黑龍江省","city":"哈爾濱","name":"丈八"},{"code":"31","province":"上海市","city":"上海","name":"長九"},{"code":"32","province":"江蘇省","city":"南京","name":"張氏"},{"code":"33","province":"浙江省","city":"杭州","name":"張詩怡"},{"code":"34","province":"安徽省","city":"合肥","name":"張世爾"},{"code":"35","province":"福建省","city":"廈門","name":"張世三"},{"code":"36","province":"江西省","city":"南昌","name":"張詩思"},{"code":"37","province":"山東省","city":"濟南","name":"張世武"},{"code":"41","province":"河南省","city":"鄭州","name":"張石榴"},{"code":"42","province":"湖北省","city":"武漢","name":"張詩琪"},{"code":"43","province":"湖南省","city":"長沙","name":"張十八"},{"code":"44","province":"廣東省","city":"廣州","name":"張世久"},{"code":"45","province":"廣西壯族自治區","city":"南寧","name":"張二師"},{"code":"46","province":"海南省","city":"?？?#34;,"name":"張二師一"},{"code":"50","province":"重慶市","city":"重慶","name":"張二師二"},{"code":"51","province":"四川省","city":"成都","name":"張貳拾叁"},{"code":"52","province":"貴州省","city":"貴陽","name":"張二十四"},{"code":"53","province":"云南省","city":"昆明","name":"張二十五"},{"code":"54","province":"西藏自治區","city":"拉薩","name":"張二師留"},{"code":"61","province":"陜西省","city":"西安","name":"張二師起"},{"code":"62","province":"甘肅省","city":"蘭州","name":"張二十八"},{"code":"63","province":"青海省","city":"西寧","name":"張二師就"},{"code":"64","province":"寧夏回族自治區","city":"銀川","name":"張三石"},{"code":"65","province":"新疆維吾爾自治區","city":"烏魯木齊","name":"張三十一"},{"code":"71","province":"臺灣省","city":"臺北","name":"張三十二"},{"code":"81","province":"香港特別行政區","city":"香港","name":"章三十三"},{"code":"82","province":"澳門特別行政區","city":"澳門","name":"章三十四"} ]?
?
總結
以上是生活随笔為你收集整理的js实现身份证号查询相关信息的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 金蝶 插入重复键值_北京数字化的金蝶财务
- 下一篇： 华为数通笔记-Telnet