沫沫金原創提供：完整的根據身份證獲取省份、性別、年齡、生日及頁面驗證
阿新 • • 發佈：2017-08-03
數字 部分 ast script cit key oot test log
概述：
身份證的校驗，識別，分離，處處可見。最近H5移動端的項目就需要掃碼獲取身份證，根據身份證自動識別省份、性別、年齡、生日信息。這裏分享完善版，希望大家喜歡。
環境：
依賴jQuery、BootStrap
Html
<form id="cardForm"> <div class="form-group"> <label>姓名</label> <input id="patientname" name="patientname" type="text" class="form-control" placeholder="姓名"> </div> <div class="form-group"> <label for="exampleInputFile">身份證號</label> <input id="idcard" name="idcardno" type="text" class="form-control" placeholder="身份證號" onblur="handIdcard(this.value)" onfocus="clearIdcard()"> </div> <div class="form-group"> <label for="exampleInputFile">聯系電話</label> <input name="mobile" type="number" class="form-control" placeholder="聯系電話"> </div> <div class="form-group"> <label for="exampleInputPassword1">省份</label> <input id="province" name="address" type="text" class="form-control" placeholder="輸入身份證自動識別省份" readonly="true"> </div> <div class="form-group"> <label for="exampleInputPassword1">生日</label> <input id="birthday" name="birthday" type="text" class="form-control" placeholder="輸入身份證自動識別生日" readonly="true"> </div> <div class="form-group"> <label for="exampleInputPassword1">性別</label> <input id="sex" name="sex" type="hidden"> <input id="sexName" type="text" class="form-control" placeholder="輸入身份證自動識別性別" disabled="true"> </div> <div class="form-group"> <label for="exampleInputPassword1">年齡</label> <input id="age" name="patientage" type="text" class="form-control" placeholder="輸入身份證自動識別年齡" readonly="true"> </div> <button type="button" class="btn btn-success" style="width: 100%" onclick="submitCard()">保存</button> </form>
JavaScript：身份證驗證及自動識別部分
1 /** 2 * 手動 - 輸入身份證校驗並解析 3 * 描述：驗證合法的身份證並回填省份、生日、性別 4 * */ 5 function handIdcard(obj){ 6 var idcardVlidate = cardCheck(obj); 7 if(idcardVlidate){ 8 callIdcard(idcardVlidate); 9 }else{ 10 $("#idcard").focus(); 11 } 12 } 13 /** 14 * 私有 - 工具 - 回填解析後的身份證信息 15 * 描述：省份、生日、性別 16 * */ 17 function callIdcard(fmtVal){ 18 $("#province").val(fmtVal.addr); 19 $("#birthday").val(fmtVal.birth);20 $("#sex").val(fmtVal.sex); 21 $("#sexName").val(getSexName(fmtVal.sex)); 22 $("#age").val(fmtVal.age); 23 } 24 /** 25 * 私有 - 工具 - 清理以下頁面信息 26 * 描述：身份證號碼、省份、生日、性別 27 * */ 28 function clearIdcard(){ 29 if($("#province").val()!=‘‘)$("#idcard").val(‘‘); 30 $("#province").val(‘‘); 31 $("#birthday").val(‘‘); 32 $("#sex").val(‘‘); 33 $("#sexName").val(‘‘); 34 $("#age").val(‘‘); 35 } 36 37 38 /**身份證驗證並獲取生日及性別 Begin*/ 39 //全局變量 40 var birth; 41 var sex; 42 var addrs; 43 44 var year; 45 var age; 46 var address; 47 var city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "內蒙古", 21: "遼寧", 22: "吉林", 23: "黑龍江 ", 31: "上海", 48 32: "江蘇", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山東", 41: "河南", 42: "湖北 ", 43: "湖南", 49 44: "廣東", 45: "廣西", 46: "海南", 50: "重慶", 51: "四川", 52: "貴州", 53: "雲南", 54: "西藏 ", 61: "陜西", 50 62: "甘肅", 63: "青海", 64: "寧夏", 65: "新疆", 71: "臺灣", 81: "香港", 82: "澳門", 91: "國外 " }; 51 52 //身份證驗證 53 function cardCheck(card) { 54 var d = new Date(); 55 var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 56 address = city[card.substr(0, 2)]; 57 58 if (card === "") 59 { 60 alert("身份證必須填寫，請檢查。"); 61 return false; 62 } 63 else if (reg.test(card) === false) 64 { 65 alert("身份證號碼應為數字，長度應為15位或18位，請檢查。"); 66 return false; 67 } 68 else if (!city[card.substr(0, 2)]) { 69 alert("身份證號前兩位無效，請檢查。"); 70 return false; 71 } 72 //處理18位的身份證號碼 73 else if (card.length == 18) 74 { 75 birth = card.substr(6, 4) + "-" + card.substr(10, 2) + "-" + card.substr(12, 2); 76 sex = sexCheck(card.substr(14, 3)); 77 if (!(dateCheck(parseInt(card.substr(6, 4)), parseInt(card.substr(10, 2)), parseInt(card.substr(12, 2))))) { 78 return false; 79 } 80 year = parseInt(card.substr(6, 4)); 81 //18位身份證需要驗證最後一位校驗位 82 if (card.length == 18) 83 { 84 card = card.split(‘‘); 85 //∑(ai×Wi)(mod 11) 86 //加權因子 87 var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; 88 //校驗位 89 var parity = [1, 0, ‘X‘, 9, 8, 7, 6, 5, 4, 3, 2]; 90 var sum = 0; 91 var ai = 0; 92 var wi = 0; 93 for (var i = 0; i < 17; i++) 94 { 95 ai = card[i]; 96 wi = factor[i]; 97 sum += ai * wi; 98 } 99 var last = parity[sum % 11]; 100 if (parity[sum % 11] != card[17]) 101 { 102 alert("身份證號最後一位[x]需要大寫[X]，請檢查。"); 103 return false; 104 } 105 } 106 else 107 { 108 //年齡 109 age = (parseInt(d.getFullYear()) - year); 110 return {"addr":address,"birth":birth,"sex":sex ,"age":age};; 111 } 112 }//處理15位的身份號碼 113 else if (card.length == 15) 114 { 115 birth = "19" + card.substr(6, 2) + "-" + card.substr(8, 2) + "-" + card.substr(10, 2); 116 sex = sexCheck(card.substr(12, 3)); 117 if (!(dateCheck(parseInt(card.substr(6, 2)), parseInt(card.substr(8, 2)), parseInt(card.substr(10, 2))))) 118 { 119 return false; 120 } 121 year = parseInt(card.substr(6, 2)); 122 } 123 124 //年齡 125 age = (parseInt(d.getFullYear()) - year); 126 return {"addr":address,"birth":birth,"sex":sex ,"age":age}; 127 } 128 129 //年月日驗證 130 function dateCheck(year, month, day) 131 { 132 var d = new Date(); 133 if (month > 12 || month <= 0) 134 { 135 alert("月應在1-12之間"); 136 return false; 137 } 138 if (day > 31 || day <= 0) 139 { 140 alert("日應在1-31之間"); 141 return false; 142 } 143 var nowYear = d.getFullYear(); 144 if (year > nowYear) 145 { 146 alert("年不能超過今年"); 147 return false; 148 } 149 return true; 150 } 151 152 //判斷性別 153 function sexCheck(sex) 154 { 155 if (parseInt(sex) % 2 == 0) { 156 return "2"; 157 } 158 else 159 { 160 return "1"; 161 } 162 } 163 /** 164 * 給用戶顯示漢字性別 165 */ 166 function getSexName(sex){ 167 if(sex==1){return "男"} 168 else if(sex==2){return "女"} 169 else {return "未知"} 170 }
JavaScript：表單提交校驗部分
/**
* 提交 - 卡信息
*/
function submitCard(){
if(emptyValidata({
"patientname":"姓名不能為空",
"idcard":"身份證號不能為空",
"province":"省份不能為空"
})){
alert("此處，請求後臺。請編寫自身項目的業務代碼");
}
}
/**
*驗證 - 提交 - 非空
*/
function emptyValidata(vldtJson){
for(var key in vldtJson){
if($("#"+key).val()==""){$("#"+key).focus(); alert(vldtJson[key]);return false;}
}
return true;
}
以上，ok.
--by.沫沫金
微信聯系
沫沫金原創提供：完整的根據身份證獲取省份、性別、年齡、生日及頁面驗證