咱们做网站的,用户体验那是相当重要的,比如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. Linux(CentOS 7)下安装postgres

    事情背景:需要在Linux上安装postgres数据库,但安装目录想直接指定,所以想通过源码编译安装pg 首先下载源码安装包.源码下载地址:https://github.com/postgres/po ...

  2. 1255: 打怪升级(Java)

    WUSTOJ 1255: 打怪升级 Description 对于多数RPG游戏来说,除了剧情就是打怪升级.本题的任务是用最短的时间取得所有战斗的胜利.这些战斗必须按照特定的顺序进行,每打赢一场,都可能 ...

  3. uboot 添加自定义命令

    ref : https://www.cnblogs.com/FREMONT/p/9824226.html 1.添加命令 1.1在common目录下,新建一个cmd_xx.c, 需要添加的命令格式为: ...

  4. 浅析ARM协处理器CP15寄存器有关指令:MCR\MRC

    ref:http://blog.csdn.net/gameit/article/details/13169405 背景: 在uboot中,start.s中涉及到了 CP15 的有关操作.查阅有关资料, ...

  5. (十四)Activitivi5之个人任务分配

    一.个人任务分配 1.1 方式一:直接流程图配置中写死: 1.2 方式二:使用流程变量 我们在启动流程的时候设置流程变量即可 /** * 启动流程实例 */ @Test public void sta ...

  6. 洛谷 P1307 数字反转

    链接:https://www.luogu.org/problem/P1307 题目: 题目描述 给定一个整数,请将该数各个位上数字反转得到一个新数.新数也应满足整数的常见形式,即除非给定的原数为零,否 ...

  7. 前端开发 Vue -3axios

    Axios是什么? 应该念“阿克希奥斯”……但是太长太拗口,我一般念“阿笑斯”…… Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get.post请求.说到get.po ...

  8. Python 生成动态变量 调用动态变量

    动态生成变量: variable = locals() for i in range(10): variable['A'+str(i)] = 123 print(A8) 调用动态变量: v = loc ...

  9. S2-016、S2-017

    前言 由于S2-016.S2-017出现的原因时相同的,只是由于poc不一样,造成了不同的攻击.S2-016是RCE,S2-017是开发型重定向漏洞.这里将两个漏洞放一起分析.另外“Struts2系列 ...

  10. K2 BPM_“选BPM还是RPA?”,这不是一道单选题_全业务流程管理专家

    在我们和企业讨论流程自动化的时候,经常会被问到一个问题,“公司目前正在调研市面上的业务流程自动化产品,我们已经把选择范围缩小到了BPM和RPA之间.我们应该怎么选择?BPM能做的好像RPA都能做到.” ...