<!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>
<! - write five input box on the page and a submit button. ->
<H2> Register </ 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 = "submit registration information" id = "sub">
</body>
<script>
// get the input box and buttons page
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");
// define in advance the status of each input box success: false as a failure, true success is
There are p1 = p2 = t1 = t2 = t3 = false;
// The first input box is bound to a lost focus event
oTxt1.onblur = function () {
// define a regular user name, this rule may themselves determine my support Chinese, letters, numbers, "-", "_" a combination of 4-20 characters
was reg = / ^ [[\ u2E80- \ u9FFF \ w -] {4,20} $ / g
// determine whether the contents of the current input
if (reg.test(this.value)) {
// if they meet the prompt success.
this.nextElementSibling.innerHTML = "成功";
t1 = true;
} else {
// otherwise prompt the user name rule.
this.nextElementSibling.innerHTML = "user name only supports Chinese, letters, numbers," - "combination" _ ", the 4-20 characters";
t1 = false;
}
}
// box is bound to a second input event loses focus, determines the special character alphanumeric password strength, one type of weak. Two types is, the three types is strong
opas1.onblur = function () {
// defined in advance for each type of state: 0 for the No, 1 to appear
There are a = b = c = 0;
// pure determined number;
var aReg = / \ d /
if (aReg.test(this.value)) {
// value of 1;
a = 1;
}
// judge a letter
var = BREG / [a-zA-Z] /
if (bReg.test(this.value)) {
// value of 1
b = 1;
}
// determines that the special symbol
There CREG = / [\ W] /
if (cReg.test(this.value)) {
// value of 1
c = 1;
}
// After the accumulation state, the sum of the determination, determines the type of difficulty; three values add up to a simple password is typically 2 to 3 is difficult
switch (a + b + c) {
case 1: this.nextElementSibling.innerHTML = "简单"; break;
case 2: this.nextElementSibling.innerHTML = "一般"; break;
case 3: this.nextElementSibling.innerHTML = "困难"; break;
}
// to a third input box is bound to lose focus of the event to determine whether the same password.
// The first time a password, just enter the password again is not empty, do Repeat password authentication
p1 = true;
if (opas2.value == "") return;
if (this.value === opas2.value) {
opas2.nextElementSibling.innerHTML = "一致";
p2 = true;
} else {
opas2.nextElementSibling.innerHTML = "inconsistent";
p2 = false;
}
}
opas2.onblur = function () {
if (this.value === opas1.value) {
this.nextElementSibling.innerHTML = "一致";
p2 = true;
} else {
this.nextElementSibling.innerHTML = "inconsistent";
p2 = false;
}
}
// to a fourth input box is bound to lose focus of the event to determine the phone number.
oTxt2.onblur = function () {
// define a phone number of a regular judge
var reg = / ^ 1 [3-9] [0-9] {9} $ /
// judge
if (reg.test(this.value)) {
//success
this.nextElementSibling.innerHTML = "正确";
t2 = true;
} else {
// format is incorrect
this.nextElementSibling.innerHTML = "Please enter a phone number format";
t2 = false;
}
}
// input box is bound to a fifth event loses focus judgment mailbox.
oTxt3.onblur = function () {
// define a regular mailbox judgment
var reg = /^[az][a-z0-9]{0,5}@[a-z0-9]{2,9}\.[az]{2,4}$/;
// judge
if (reg.test(this.value)) {
//success
this.nextElementSibling.innerHTML = "正确";
t3 = true;
} else {
// format is incorrect
this.nextElementSibling.innerHTML = "Please enter the email conform to the format of";
t3 = false;
}
}
// The sixth input box is bound to a click event.
osub.onclick = function () {
// When submitted, determine the status of all input boxes must be all true
if (t1 && p1 && p2 && t2 && t3) {
// If successful click to jump
window.location.href = "https://www.cnblogs.com/zl-light/"
} else {
// as long as one is not true, it is judged individually, to find the real error
if (!t1) {
alert ( "username error");
}
if (!p1) {
alert ( "incorrect password");
}
if (!p2) {
alert ( "twice inconsistent");
}
if (!t2) {
alert ( "phone number does not meet");
}
if (!t3) {
alert ( "E-mail does not meet");
}
}
}
</script>
</html>