js配合正則實現各類驗證（郵箱，手機號，生日，身份證號等）

時間 2019-11-13

標籤配合正則實現各類驗證郵箱手機生日身份證欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html>

<html>

<head>

body {

background-color: rgb(177, 208, 224);

font: normal 12px Trebuchet MS;

color: #000;

}

.roundedCorners {

width: 350px;

padding: 10px;

background: #58bc58;

box-shadow: 0px 0px 10px 0px #888888;

border: 1px solid #DDEEF6;

border-radius: 6px;

margin: auto;

}

.roundedCorners-textbox {

border: 1px solid #999;

width: 250px;

}

.checkbox {

margin-left: 30px;

border: 1px solid #999;

width: 20px;

}

.label {

display: inline-block;

width: 50px;

text-align: center;

}

.default {

color: grey;

font-size: 12px;

}

.input {

color: grey;

font-size: 12px;

}

</style>

</head>

window.onload = function () {

表單提交是默認行爲

* preventDefault()

* returnValue = false;

知識點：

* 正則表達式的方法

* reg.test(str)：用正則表達式reg驗證str是否合法

* exec() 等同於 match

* 分組：()

* 引用

* 正則內引用：\n \1,\2

* 正則外引用：$n $1,$2

* 非：

* ^

* [^\d]

* 表示全部字符：[\s\S],[\w\W],[\d\D]

var btnCheck = document.getElementById('btnCheck');

btnCheck.onclick = function (e) {

若是如下表單有一個不符合，則不容許提交表單

e = e || window.event;

驗證帳號

* 不能爲空，

* 不能使用特殊字符（數字、字母、下劃線、橫槓）開頭，

* 必須以字母開頭，

* 長度6-20

var username = document.getElementById('username').value;

if (!/^[a-z][\w\-]{5,19}$/.test(username)) {

alert('您輸入的用戶名不合法');

// e.preventDefault();

// return;

return false;

}

//暱稱只能輸入中文

var nickname = document.getElementById('nickname').value;

if (!/^[\u2E80-\u9FFF]+$/.test(nickname)) {

alert('暱稱必須爲中文');

return false;

}

電子郵件

jinrong.xie@qq.com

123@qq.com

x_x@163.com

x-x@a-r.com.cn

x.x@laoxie.com

郵箱用戶名必須3-30個字符

var email = document.getElementById('email').value;

if (!/^[a-z0-9][\w\-\.]{2,29}@[a-z0-9\-]{2,67}(\.[a-z\u2E80-\u9FFF]{2,6})+$/.test(email)) {

alert('郵箱格式錯誤');

return false;

}

身份證

18/15

445655 19900707 2165

445655 19900707 211x

var identity = document.getElementById('identity').value;

if (!/^(\d{17}|\d{14})[\dx]$/.test(identity)) {

alert('身份證格式錯誤');

return false;

}

手機號碼

11位

158 8888 8888

1 [34578]

var phone = document.getElementById('phone').value;

if (!/^1[3-9]\d{9}$/.test(phone)) {

alert('手機號錯誤');

return false;

}

生日

1999/05/08

1999-5-8

19990508

1999-05/08 不合法

199905

引用分組

* 正則內：\n

* 正則外:$n

分組順序：以左括號出現的順序爲分組順序

var birthday = document.getElementById('birthday').value;

if (!/^\d{4}([\/\-]?)\d{1,2}\1\d{1,2}$/.test(birthday)) {

alert('生日格式錯誤');

return false;

}

密碼

長度6-20

不能包含空格

var password = document.getElementById('password').value;

if (!/^\S{6,20}$/.test(password)) {

alert('密碼禁止空格');

return false;

}

var confirm_pwd = document.getElementById('confirm_pwd').value;

if (confirm_pwd != password) {

alert('兩次輸入密碼不一致，請你仔細看看');

return false;

}

// 根據身份自動寫入生日

document.getElementById('identity').onblur = function () {

// 445655199007072165

var res = this.value.match(/\d{6}(\d{8})\d{4}/);

if (res) {

res = res[1];

}

document.getElementById('birthday').value = res;

}

</script>

<body>

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<label>10天內免登錄</label>

<br/>

</div>

</form>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。