老师，帮忙检查下？？

来源：3-9 编程练习

goufully

2019-05-13 13:23:27

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
form {
width: 300px;
background: pink;
text-align: center;
padding: 30px 0;
margin: 100px auto;
}

</style>
</head>
<body>
<form id="form">
<p><input type="text" name="name" id="username" placeholder="请输入账户名"></p>
<span></span>
<p><input type="text" name="chinaName" id="chinaName" placeholder="请输入中文名"></p>
<span></span>
<p><input type="email" name="eamil" id="email" placeholder="请输入邮箱"></p>
<span></span>
<p><input type="submit" value="注册" id="submit"></p>
</form>
<script type="text/javascript">
var spans = document.getElementsByTagName("span");
var username = document.getElementById("username");
var chinaName = document.getElementById("chinaName");
var email = document.getElementById("email");
var submit = document.getElementById("submit");
var input1 = false;
var input2 = false;
var input3 = false;
username.onfocus = function () {
spans[0].innerHTML = "请输入6-18位数字，字母，下划线";
spans[0].style.color = "red";
};
username.onblur = function () {
var reg = /^\w{6,18}$/;
if (this.value == "") {
spans[0].innerHTML = "请务必输入用户名";
spans.style.color = "red";
} else {
if (!reg.exec(username.value)) {
spans[0].innerHTML = "请输入正确的用户名";
spans[0].style.color = "red";
} else {
spans[0].innerHTML = "格式输入正确";
spans[0].style.color = "green";
input1 = true;
}
}
};
chinaName.onfocus = function () {
spans[1].innerHTML = "请输入中文名字";
spans[1].style.color = "red";
};
chinaName.onblur = function () {
var reg = /^[\u4e00-\u9fa5]{2,5}$/;
if (this.value == "") {
spans[1].innerHTML = "请输入中文名字";
spans[1].style.color = "red";
} else {
if (!reg.exec(chinaName.value)) {
spans[1].innerHTML = "请输入正确的中文名";
spans[1].style.color = "red";
} else {
spans[1].innerHTML = "格式正确";
spans[1].style.color = "green";
input2 = true;
}
}

};
email.onfocus = function () {
spans[2].innerHTML = "请输入邮箱名";
spans[2].style.color = "red";
};
email.onblur = function () {
//aa@aa.com

var reg = /^\w+@\w+\.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
if (this.value == "") {
spans[2].innerHTML = "请务必输入邮箱名";
spans[2].style.color = "red";
} else {
if (!reg.exec(chinaName.value)) {
spans[2].innerHTML = "请输入正确的邮箱";
spans[2].style.color = "red";
} else {
spans[2].innerHTML = "格式正确";
spans[2].style.color = "green";
input3 = true;
}
}

};
submit.onclick = function () {
if ( input1 == false || input2 == false || input3 == false ){
alert(" 您的信息有误 ")
} else {
alert(" 登记成功 ! ")
}
};

</script>

</body>

</html>