jQuery實現身份證輸入添加空格 表單驗證身份證輸入，並且輸入時前6位添加一個空格，中間8位後添加一個空格,及身份證格式驗證 參考：基於jquery實現的銀行卡號每隔4位自動插入空格的實現代碼 參考網址： http://www.jb51.net/article/97966.html 源碼代碼如下: ...
說明：jQuery實現身份證輸入添加空格，表單驗證身份證輸入，並且輸入時前6位添加一個空格，中間8位後添加一個空格,及身份證格式驗證
參考：基於jquery實現的銀行卡號每隔4位自動插入空格的實現代碼 參考網址： http://www.jb51.net/article/97966.html 源碼代碼如下: 1<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>
