咱们做网站的,用户体验那是相当重要的,比如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;
}
}
}

js实现填写身份证号、手机号、准考证号等信息自动空格的效果的更多相关文章

  1. js 随机生成姓名、手机号、身份证号、银行卡号

    开发测试的时候,经常需要填写姓名.手机号.身份证号.银行卡号,既要符合格式要求.又不能重复.大家会到网上搜各种生成器.能不能自己写一个简单的生成器呢.下面是随机生成姓名.手机号.身份证号.银行卡号的j ...

  2. python:利用urllib查找计算机二级准考证号

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaYAAAEACAIAAAB3VkWnAAAgAElEQVR4nOydZ3gUR9bv+WhExhHnDH

  3. 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app

    一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 ...

  4. NOIP模拟赛 准考证号

    准考证号 128M 0.1s ticket.cpp escription 蒟蒻hzwer NOIP2014惨跪,他依稀记得他的准考证号是37,现在hzwer又将要面临一场比赛,他希望准考证号不出现37 ...

  5. js中单引号和双引号的区别(html中属性规范是用双引号,js中字符串规定是用单引号)(js中单引号区别和php很像:单引号快,双引号可转义字符,双引号可解析变量)

    js中单引号和双引号的区别(html中属性规范是用双引号,js中字符串规定是用单引号)(js中单引号区别和php很像:单引号快,双引号可转义字符,双引号可解析变量) 一.总结 1.html中属性规范是 ...

  6. JS正则表达式验证账号、手机号、电话和邮箱

    JS正则表达式验证账号.手机号.电话和邮箱 效果体验:http://keleyi.com/keleyi/phtml/jstexiao/15.htm 验证帐号是否合法 验证规则:字母.数字.下划线组成, ...

  7. 微信公众号_订阅号_access_token_创建菜单_菜单name+表情

    全局唯一接口调用凭据 access_token 用于接口调用的一个必要参数 有了 access_token 就能实现所有的接口 特点:  1. 有效期为 2 小时,所以 2 小时要更新一次,提前 5 ...

  8. 对网页接口的追踪探索(以b站通过bv号查询av号为例

    对网页接口的追踪探索(以b站通过bv号查询av号为例 序言 本文只提供一种探索网页加载时后端访问接口情况的思路,所举例子没有太大实际用处. 一 自2020年3月23日起,AV号将全面升级到BV号.但是 ...

  9. 分区里的inode号是0号和1号的block

    分区里的inode号是0号和1号的block 我相信大家在使用Linux的时候都遇到过误删文件系统数据的情况,不管是自己误删还是帮人家恢复误删 现在用的比较多的恢复工具大概是ext3grep .ext ...

随机推荐

  1. ${__setProperty 等常见jmeter参数相关博客汇总

    jmeter 控制线程组执行顺序   这个要配合全局变量.if和while来实现BeanShell取样器,全局变量:${__setProperty(newswitch,${switch1},)}if条 ...

  2. PAT(B) 1019 数字黑洞(Java)

    题目链接:1019 数字黑洞 (20 point(s)) 分析 输入正整数n后,将n转成int型数组nArr[4] 用Arrays.sort(int[] a)方法将数组nArr非递减排序 很显然,非递 ...

  3. pandas数据结构之Panel笔记

    Panel创建的是三维的表 items:坐标轴0,索引对应的元素是一个DataFrame major_axis:坐标轴1,DataFrame里的行标签 minor_axis:坐标轴2,DataFram ...

  4. 软件模拟IIC实现EEPROM

    ....妈的太难.    反正就是控制引脚的高低电平 实现数据的读取....参考 I2C的协议层和物理层的那个几个图,个个信号产生的电平 自己看源码去把. 头疼

  5. Activate注解

    Activate注解 被该注解修饰的接口,扩展类可能会被加载 ProtocolFilterWrapper.buildInvokerChain @Documented @Retention(Retent ...

  6. Scratch—点亮生日蜡烛

    过生日是小朋友们创作Scratch作品经常会用到的素材,今天介绍使用一些基础技能来点亮生日蜡烛的实现方法. 1.角色设计只有三种:生日蛋糕.未点燃的蜡烛.已点燃的蜡烛. 2.未点燃的蜡烛:在程序启动时 ...

  7. nacos搭建

    1.下载执行包 直接官网 https://nacos.io/zh-cn/docs/quick-start.html 2. 建表 3. 启动 http://10.0.0.113:8848/nacos/i ...

  8. sessionId详解

    sessionid是一个会话的key,浏览器第一次访问服务器会在服务器端生成一个session,有一个sessionid和它对应.服务端在创建了Session的同时,会为该Session生成唯一的se ...

  9. 一篇文章彻底搞懂异步,同步,setTimeout,Promise,async

    之前翻看别的大佬的博客看到了关于setTimeout,promise还有async执行顺序的文章.观看了几篇之后还是没有怎么看懂,于是自己开始分析代码,并整理了此文章,我相信通过此文章朋友们能对异步同 ...

  10. dll安装到GAC以及引用的方法【转】

    一 首先    程序集(dll) 安装到 GAC 中的方法 所谓的GAC,就是全局程序集缓存(Global Assembly Cache). 针对一些类库项目或用户控件项目在程序开发完成后,有时需要将 ...