jQuery实现18位身份证输入隔位添加空格及格式验证
程序员文章站
2022-03-18 16:27:51
jQuery实现身份证输入添加空格 表单验证身份证输入，并且输入时前6位添加一个空格，中间8位后添加一个空格,及身份证格式验证 参考：基于jquery实现的银行卡号每隔4位自动插入空格的实现代码 参考网址： http://www.jb51.net/article/97966.html 源码代码如下: ......
说明：jQuery实现身份证输入添加空格，表单验证身份证输入，并且输入时前6位添加一个空格，中间8位后添加一个空格,及身份证格式验证
参考：基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
源码代码如下:
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
<meta charset="UTF-8">
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7
<title>Document</title>
8
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
9
<style>
10
.box {
11
width: 500px;
12
text-align: center;
13
margin: 0 auto;
14
}
15
16
.box button {
17
margin: 20px auto;
18
}
19
20
.box .error {
21
color: red;
22
}
23
</style>
24
</head>
25
<body>
26
<div class="box">
27
<form>
28
<label for="card">身份证号：</label>
29
<input type="text" name="card" id="card" value="" maxlength="20">
30
<span class="error"></span>
31
<br>
32
<button type="button">提交</button>
33
</form>
34
</div>
35
</body>
36
<script type="text/javascript">
37
$(function () {
38
//键盘弹起
39
$('#card').on('keyup', function (e) {
40
if ((e.which >= 48 && e.which <= 57) ||
41
(e.which >= 96 && e.which <= 105) || e.which == 88) {
42
$('.error').text('');
43
//获取当前光标的位置
44
var caret = this.selectionStart;
45
//获取当前的value
46
var value = this.value;
47
//从左边沿到坐标之间的空格数
48
var sp = (value.slice(0, caret).match(/\s/g) || []).length;
49
//去掉所有空格
50
var nospace = value.replace(/\s/g, '');
51
//重新插入空格
52
var curVal = this.value = nospace.replace(/(^(\d{6})|(\d{8}))(?=[^\s])/g, "$1 ").trim();
53
//从左边沿到原坐标之间的空格数
54
var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length
55
//修正光标位置
56
this.selectionEnd = this.selectionStart = caret + curSp - sp
57
} else {
58
$('.error').text('只能输入数字或X、x');
59
}
60
});
61
//失去焦点
62
$("#card").on('blur', function () {
63
//验证身份证号
64
var value = $(this).val();
65
var val = value.replace(/\s/ig, ""); //去除空格
66
console.log(val);
67
var pattern = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
68
if (pattern.test(val) == false) {
69
$('.error').text('身份证号码格式不正确');
70
} else {
71
$('.error').text();
72
}
73
});
74
75
$("button").on('click', function () {
76
var value = $('#card').val();
77
var card = value.replace(/\s/ig, ""); //去除空格
78
if (card == '') {
79
$('.error').text('身份证号码不能为空');
80
} else {
81
alert(card);
82
$.post({
83
url: "form.php",
84
data: { "card": card }
85
});
86
}
87
});
88
});
89
</script>
90
</html>
上一篇： 连床都不会叫
下一篇： Java中的两种for循环介绍