js实现填写身份证号、手机号、准考证号等信息自动空格的效果
咱们做网站的,用户体验那是相当重要的,比如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实现填写身份证号、手机号、准考证号等信息自动空格的效果的更多相关文章
- js 随机生成姓名、手机号、身份证号、银行卡号
开发测试的时候,经常需要填写姓名.手机号.身份证号.银行卡号,既要符合格式要求.又不能重复.大家会到网上搜各种生成器.能不能自己写一个简单的生成器呢.下面是随机生成姓名.手机号.身份证号.银行卡号的j ...
- python:利用urllib查找计算机二级准考证号
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAaYAAAEACAIAAAB3VkWnAAAgAElEQVR4nOydZ3gUR9bv+WhExhHnDH
- 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app
一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 ...
- NOIP模拟赛 准考证号
准考证号 128M 0.1s ticket.cpp escription 蒟蒻hzwer NOIP2014惨跪,他依稀记得他的准考证号是37,现在hzwer又将要面临一场比赛,他希望准考证号不出现37 ...
- js中单引号和双引号的区别(html中属性规范是用双引号,js中字符串规定是用单引号)(js中单引号区别和php很像:单引号快,双引号可转义字符,双引号可解析变量)
js中单引号和双引号的区别(html中属性规范是用双引号,js中字符串规定是用单引号)(js中单引号区别和php很像:单引号快,双引号可转义字符,双引号可解析变量) 一.总结 1.html中属性规范是 ...
- JS正则表达式验证账号、手机号、电话和邮箱
JS正则表达式验证账号.手机号.电话和邮箱 效果体验:http://keleyi.com/keleyi/phtml/jstexiao/15.htm 验证帐号是否合法 验证规则:字母.数字.下划线组成, ...
- 微信公众号_订阅号_access_token_创建菜单_菜单name+表情
全局唯一接口调用凭据 access_token 用于接口调用的一个必要参数 有了 access_token 就能实现所有的接口 特点: 1. 有效期为 2 小时,所以 2 小时要更新一次,提前 5 ...
- 对网页接口的追踪探索(以b站通过bv号查询av号为例
对网页接口的追踪探索(以b站通过bv号查询av号为例 序言 本文只提供一种探索网页加载时后端访问接口情况的思路,所举例子没有太大实际用处. 一 自2020年3月23日起,AV号将全面升级到BV号.但是 ...
- 分区里的inode号是0号和1号的block
分区里的inode号是0号和1号的block 我相信大家在使用Linux的时候都遇到过误删文件系统数据的情况,不管是自己误删还是帮人家恢复误删 现在用的比较多的恢复工具大概是ext3grep .ext ...
随机推荐
- python 脚本定时删除 elk索引
脚本如下 一.python 脚本如下 #! /usr/bin/python # -*- coding=utf-8 -*- import urllib import urllib.request imp ...
- hadoop--Unable to load native-hadoop library for your platform解决方法
笔者实验环境:centos 7.4.1708,hadoop-2.6.0-cdh5.14.2. 执行hadoop命令时出现以下告警,不能加载相关库: WARN util.NativeCodeLoader ...
- Linux下的静态库与动态库的生成与调用
静态库与动态库 静态函数库 这类库的名字一般是libxxx.a,xxx为库的名字.利用静态函数库编译成的文件比较大,因为整个函数库的所有数据都会被整合进目标代码中,他的优点就显而易见了,即编译后的执行 ...
- python学习——while True的用法
在学习过程中,经常能遇到采用while True的用法.下面以一个例子进行说明: 建立一个用户登录系统,用户输入用户名和密码,如果正确就可以进入系统. 1.我自己最开始的写法: d = {} #数据库 ...
- MVC——三层架构笔记、1
三层架构MVC笔记1. DAL——数据访问层:(专门与数据库交互,增删查改的方法都在这:需引用MODEL层) BLL——业务逻辑层:(页面与数据库之间的桥梁:需引用DAL.MODEL层) MODEL— ...
- R语言做逻辑回归
前面写过一个多分类的逻辑回归,现在要做一个简单的二分类,用glm函数 导入csv格式如下: mydata<-read.csv("D://li.csv",header=T) c ...
- IE浏览器 Table 兼容问题
border篇: 直接在<tr>标签上添加 border-bottom:1px solid red; 在IE8以上浏览器有效,IE7以下版本无效 解决方案:需给<table&g ...
- Nopcommerce4.2解析——安装
Nopcommerce是一个DotNet领域异常凶残的一个开源电商系统,最先版本4.2,下面我们会逐步分析他的各个模块,为我们的二次开发做准备,应该会写一个系列. 首次运行nop页面会自动跳转到安装页 ...
- DOM树节点关系
DOM是JS中专门操作HTML页面内容的 他的三种基本使用方法是: 1. document.getElementById(''): ——>选取html页面中带有Id的属性名: 2.docum ...
- javamail "535 5.7.3 Authentication unsuccessful" 问题排查
有一家odm的服务器用Javamail发邮件的时候报错 Authentication unsuccessful 其他的有些又是正常的 网上查了一下解决方法如下 JavaMailSenderImpl ...