咱们做网站的,用户体验那是相当重要的,比如12306抢票需要填写身份证,如果不空格,密密麻麻的给我一种很压抑的感觉,而且也不容易核对信息是否填写正确,所以我就写了一个利用Js实现填写身份证号、手机号、准考证号等信息自动空格的效果。
为了方便,自已定义的一个简单的get()方法和trim()方法,代码如下:
//获取对应的对象--function函数. function get(id) { return document.getElementById(id); } //去掉所有空格--String类的属性. String.prototype.trim = function () { return this.replace(/\s+/g, ""); };
实例1:身份证号自动空格,支持18位的身份证号码,格式为"xxx xxx xxxx xxxx xxxx".
//身份证自动空格. function FillIdentity() { var idNumber = get("IDNumber");//页面上输入身份证号码的文本框的Id. var idValue = idNumber.value.trim(); if (idValue != "") { var idLength = idValue.length; if (idLength <= 3) { idNumber.value = idValue; } else { if (idLength <= 6) { idNumber.value = idValue.substring(0, 3) + " " + idValue.substring(3, idLength); } else { if (idLength <= 10) { idNumber.value = idValue.substring(0, 3) + " " + idValue.substring(3, 6) + " " + idValue.substring(6, idLength); } else { if (idLength <= 14) { idNumber.value = idValue.substring(0, 3) + " " + idValue.substring(3, 6) + " " + idValue.substring(6, 10) + " " + idValue.substring(10, idLength); } else { idNumber.value = idValue.substring(0, 3) + " " + idValue.substring(3, 6) + " " + idValue.substring(6, 10) + " " + idValue.substring(10, 14) + " " + idValue.substring(14, idLength); } } } } } }
实例2:手机号码自动空格,支持11位的手机号码,格式为"xxx xxxx xxxx".
//手机号自动空格. function FillMobile() { var mobile = get("Mobile");//页面上输入手机号码的文本框的Id. var mValue = mobile.value.trim(); if (mValue != "") { var mLength = mValue.length; if (mLength <= 3) { mobile.value = mValue; } else { if (mLength <= 7) { mobile.value = mValue.substring(0, 3) + " " + mValue.substring(3, mLength); } else { mobile.value = mValue.substring(0, 3) + " " + mValue.substring(3, 7) + " " + mValue.substring(7, mLength); } } } }
实例3:准考证号自动空格,没有固定的格式,简单来说就是"四位一空格",格式为"xxxx xxxx xxxx".
//准考证号自动空格. function FillTicket() { var ticket = get("Ticket");//页面上输入准考证号的文本框的Id. var tValue = ticket.value.trim(); if (tValue != "") { var tLength = tValue.length; var count = parseInt(tLength / 4); if (count >= 1) { ticket.value = ""; for (var i = 1; i <= count; i++) { ticket.value += tValue.substring((i - 1) * 4, (i) * 4); if (tLength > (i * 4)) {//不加此判断会出现遇到空格按退格键无效的Bug. ticket.value += " "; } } ticket.value += tValue.substring(count * 4, tLength); } } }
其他代码:
验证身份证号码是否正确,包括验证出生日期是否合法,校验码是否正确.
//能提示校验码的身份证号码验证方法. function FillNumber() { var num = get("IDNumber").value.trim();//页面上输入身份证号码的文本框的Id. if (num == "") { alert("请输入身份证号!"); return false; } num = num.toUpperCase(); //身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X(身份证上是大写)。 if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num))) { alert(‘温馨提示:\n\n输入的身份证号长度不对,或者号码不符合规定!\n15位号码应全为数字,18位号码末位可以为数字或X!‘); return false; } //校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10。 //下面分别分析出生日期和校验位 var len, re; len = num.length; if (len == 15) { if (isNaN(num)) { alert("15位身份证号码只能为数字!"); return false; } re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/); var arrSplit = num.match(re); //检查生日日期是否正确. var dtmBirth = new Date(‘19‘ + arrSplit[2] + ‘/‘ + arrSplit[3] + ‘/‘ + arrSplit[4]); var bGoodDay; bGoodDay = (dtmBirth.getYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4])); if (!bGoodDay) { alert(‘温馨提示:\n\n您输入的身份证号码里出生日期不对,请确认后重新输入!‘); return false; } else { //将15位身份证转成18位 //校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10。 var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); var arrCh = new Array(‘1‘, ‘0‘, ‘X‘, ‘9‘, ‘8‘, ‘7‘, ‘6‘, ‘5‘, ‘4‘, ‘3‘, ‘2‘); var nTemp = 0, i; num = num.substr(0, 6) + ‘19‘ + num.substr(6, num.length - 6); for (i = 0; i < 17; i++) { nTemp += num.substr(i, 1) * arrInt[i]; } num += arrCh[nTemp % 11]; alert("当前15位身份证号码正确!"); return num; } } if (len == 18) { if (isNaN(num.substring(0, 17))) { alert("身份证号码前17位只能为数字!"); return false; } re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/); var arrSplit = num.match(re); //检查生日日期是否正确 var dtmBirth = new Date(arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]); var bGoodDay; bGoodDay = (dtmBirth.getFullYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4])); if (!bGoodDay) { //alert(dtmBirth.getYear()); //alert(arrSplit[2]); alert(‘温馨提示:\n\n您输入的身份证号码里出生日期(‘ + arrSplit[2] + arrSplit[3] + arrSplit[4] + ‘)不对,请确认后重新输入!‘); return false; } else { if (isNaN(num.substring(17))&&num.substring(17) != "X") { alert("18位身份证号码的校验码只能为0至9或者字母‘X’"); return false; } //检验18位身份证的校验码是否正确。 //校验位按照ISO 7064:1983.MOD 11-2的规定生成,X可以认为是数字10。 var valnum; var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2); var arrCh = new Array(‘1‘, ‘0‘, ‘X‘, ‘9‘, ‘8‘, ‘7‘, ‘6‘, ‘5‘, ‘4‘, ‘3‘, ‘2‘); var nTemp = 0, i; for (i = 0; i < 17; i++) { nTemp += num.substr(i, 1) * arrInt[i]; } valnum = arrCh[nTemp % 11]; if (valnum != num.substr(17, 1)) { alert(‘温馨提示:\n\n18位身份证的校验码不正确,应该为:‘ + valnum + ",请您确认后重新输入!"); return false; } alert("当前18位身份证号码正确!"); return num; } } }
感谢您怀着耐心看完整篇博文!!!
如果文章有什么错误或不当之处,请您斧正!
您有任何意见或者建议,您可以给我发邮件,也可以在下面留言,我看到了会第一时间回复您的,谢谢!