<!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>