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

    dict字典 字典的概述 • 概述:使⽤键-值(key-value)⽅式存储. • key的特点: • 1.字典中的key必须是唯⼀的 • 2.key值必须是不可变的数据类型:字符串.元组.Numbe ...

  2. Nginx学习笔记(一):Nginx 进程模型 / 事件处理模型

    Nginx 进程模型 ​​​​ 多进程模型 进程间相互独立,无需加锁,且互不影响: 一个进程退出了不影响其他的进程运行,降低风险: 当请求到来,多个 worker 通过竞争 accrpt_mutex ...

  3. ( 十二)Json的使用(上)

    一.什么是JSON 1.1 javaScript中定义对象的几种方式 使用内置对象 自定义对象构造 使用JSON符号  (1)使用内置对象 JavaScript可用的内置对象可分为两种: 1,Java ...

  4. Sqlserver查询每组数据中最大的一条数据

    select * from ( SELECT ROW_NUMBER() over (PARTITION By name order by val) as rowId,tb_test.* FROM tb ...

  5. 再谈 pm2

    比forever好用,对Ubuntu和centos更友好,性能监控.自动重启.负载均衡,适用于laas场景, 总之,pm2是一个带有负载均衡功能的Node应用的进程管理器,可以实现在云服务器上,对no ...

  6. Android蓝牙遥控器APP关键代码 guihub项目

    package com.car.demo; import java.io.IOException; import java.io.OutputStream; import java.util.UUID ...

  7. sql 批量插入

    create  PROCEDURE insertinto as begindeclare @id int;set @id=1;while @id<10begininsert into perso ...

  8. Python练习_数据类型_day4

    题目 1.作业 1,写代码,有如下列表,按照要求实现每一个功能 li = ["alex", "WuSir", "ritian", " ...

  9. 使用shared memory 计算矩阵乘法 (其实并没有加速多少)

    #include "cuda_runtime.h" #include "device_launch_parameters.h" #include "d ...

  10. Go map使用

    前言 map 是在 Go 中将值(value)与键(key)关联的内置类型.通过相应的键可以获取到值. 在一个map里所有的键都是唯一的,而且必须是支持==和!=操作符的类型,切片.函数以及包含切片的 ...