正則實現簡單的表單的驗證及跳轉

時間 2019-11-13

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 在頁面上寫出5個輸入框和一個提交按鈕。 -->
<h2>註冊</h2>
帳號：<input type="text" id="txt1"><span></span><br><br>
密碼：<input type="password" id="pas1"><span></span><br><br>
確認密碼：<input type="password" id="pas2"><span></span><br><br>
手機號：<input type="text" id="txt2"><span></span><br><br>
郵箱：<input type="text" id="txt3"><span></span><br><br>
<input type="submit" value="提交註冊信息" id="sub">
</body>

<script>
// 獲取頁面的輸入框及按鈕
var oTxt1 = document.getElementById("txt1");
var opas1 = document.getElementById("pas1");
var opas2 = document.getElementById("pas2");
var oTxt2 = document.getElementById("txt2");
var oTxt3 = document.getElementById("txt3");
var osub = document.getElementById("sub");
// 提早定義每一個輸入框的成功狀態：false爲失敗，true爲成功
var t1 = p1 = p2 = t2 = t3 = false;
//給第一個輸入框綁定一個失去焦點事件
oTxt1.onblur = function () {
//定義一個用戶名的正則，這個規則能夠本身肯定，個人是支持中文、字母、數字、「-」「_」的組合，4-20個字符
　　var reg = /^[\u2E80-\u9FFF\w-]{4,20}$/gi
//判斷當前輸入的內容是否符合
　　if (reg.test(this.value)) {
//如符合提示成功。
　　　　this.nextElementSibling.innerHTML = "成功";
　　　　t1 = true;
} else {
//不然提示用戶名規則。
　　　　this.nextElementSibling.innerHTML = "用戶名僅支持中文、字母、數字、「-」「_」的組合，4-20個字符";
　　　　t1 = false;
　　}
}
//給第二個輸入框綁定一個失去焦點事件,判斷密碼強度數字字母特殊字符，一種類型，弱。兩種類型爲中，三種類型爲強
opas1.onblur = function () {
//提早定義每種類型的狀態：0爲沒有，1爲出現
　　　　var a = b = c = 0;
//判斷爲純數字;
　　　　var aReg = /\d/
　　　　if (aReg.test(this.value)) {
//數值爲1；
　　　　　　a = 1;
　　　　}
//判斷爲字母
　　　　var bReg = /[a-zA-Z]/
　　　　if (bReg.test(this.value)) {
//數值爲1
　　　　　　b = 1;
　　　　}
// 判斷爲特殊符號
　　　　var cReg = /\W/
　　　　if (cReg.test(this.value)) {
// 數值爲1
　　　　　　c = 1;
　　　　}
//狀態累加以後，判斷總和，判斷難度類型；三個數值相加爲1密碼爲簡單爲2爲通常爲3爲困難
　　　　switch (a + b + c) {
　　　　　　case 1: this.nextElementSibling.innerHTML = "簡單"; break;
　　　　　　case 2: this.nextElementSibling.innerHTML = "通常"; break;
　　　　　　case 3: this.nextElementSibling.innerHTML = "困難"; break;
}
//給第三個輸入框綁定一個失去焦點事件判斷密碼是否一致。
//在第一次輸入密碼時，只要再次輸入的密碼不爲空，都作重複密碼的驗證
p1 = true;
if (opas2.value == "") return;
if (this.value === opas2.value) {
　　　　opas2.nextElementSibling.innerHTML = "一致";
　　　　p2 = true;
　} else {
opas2.nextElementSibling.innerHTML = "不一致";
p2 = false;
}
}
opas2.onblur = function () {
if (this.value === opas1.value) {
　　　　this.nextElementSibling.innerHTML = "一致";
　　　　p2 = true;
} else {
　　　　this.nextElementSibling.innerHTML = "不一致";
　　　　p2 = false;
}
}
//給第四個輸入框綁定一個失去焦點事件判斷手機號。
oTxt2.onblur = function () {
//定義一個判斷手機號的正則
var reg = /^1[3-9][0-9]{9}$/
//判斷
if (reg.test(this.value)) {
//成功
　　　　this.nextElementSibling.innerHTML = "正確";
　　　　t2 = true;
} else {
//格式不正確
　　　　this.nextElementSibling.innerHTML = "請輸入符合格式的手機號";
　　　　t2 = false;
}
}
//給第五個輸入框綁定一個失去焦點事件判斷郵箱。
oTxt3.onblur = function () {
//定義一個判斷郵箱的正則
var reg = /^[a-z][a-z0-9]{0,5}@[a-z0-9]{2,9}\.[a-z]{2,4}$/;
//判斷
if (reg.test(this.value)) {
//成功
　　　　this.nextElementSibling.innerHTML = "正確";
　　　　t3 = true;
} else {
//格式不正確
　　　　this.nextElementSibling.innerHTML = "請輸入符合格式的郵箱";
　　　　t3 = false;
}
}
//給第六個輸入框綁定一個點擊事件。
osub.onclick = function () {
// 提交時，判斷全部輸入框的狀態必須全爲true
if (t1 && p1 && p2 && t2 && t3) {
//若是成功點擊跳轉
　　window.location.href = "https://www.cnblogs.com/zl-light/"
} else {
// 只要有一個不爲true，都單獨判斷，找到真正的錯誤
　　　　　　if (!t1) {
　　　　　　　　alert("用戶名錯誤");
　　　　　　}
　　　　　　if (!p1) {
　　　　　　　　alert("密碼不正確");
　　　　　　}
　　　　　　if (!p2) {
　　　　　　　　alert("兩次不一致");
　　　　　　}
　　　　　　if (!t2) {
　　　　　　　　alert("手機號不符合");
　　　　　　}
　　　　　　if (!t3) {
　　　　　　　　alert("郵箱不符合");
　　　　　　}
　　}

}
</script>

</html>

相關標籤/搜索

每日一句

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