3-9 检查
来源：3-9 编程练习
ZZZZZzn
2020-06-01 13:47:39
<!DOCTYPE html>
<html>
<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="请输入账户名" autocomplete="off"></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= "#000";
}
username.onblur =function () {
var reg = /^\w{6,18}$/;
if (this.value=="") {
spans[0].innerHTML= "用户名不能为空";
spans[0].style.color= "#000";
}else{
if (reg.exec(username.value)) {
username.style.backgroundColor= "orange";
spans[0].style.display= "none";
input1 = true;
}else{
spans[0].style.display= "block";
spans[0].innerHTML= "用户名错误";
spans[0].style.color= "#000";
}
}
}
//中文名
chinaName.onfocus = function(){
spans[1].innerHTML= "请输入中文名";
spans[1].style.color= "#000";
}
chinaName.onblur =function () {
var reg = /^[\u4e00-\u9fa5]{2,4}$/;
if (this.value=="") {
spans[1].innerHTML= "中文名不能为空";
spans[1].style.color= "#000";
}else{
if (reg.exec(chinaName.value)) {
chinaName.style.backgroundColor= "orange";
spans[1].style.display= "none";
input2 = true;
}else{
spans[1].style.display= "block";
spans[1].innerHTML= "中文名错误";
spans[1].style.color= "#000";
}
}
}
//邮箱
email.onfocus = function(){
spans[2].innerHTML= "请输入邮箱";
spans[2].style.color= "#000";
}
email.onblur =function () {
var reg = /^\w+@\w+\.[a-zA-Z]{2,4}$/;
if (this.value=="") {
spans[2].innerHTML= "邮箱不能为空";
spans[2].style.color= "#000";
}else{
if (reg.exec(email.value)) {
email.style.backgroundColor= "orange";
spans[2].style.display= "none";
input3 = true;
}else{
spans[2].style.display= "block";
spans[2].innerHTML= "邮箱格式错误";
spans[2].style.color= "#000";
}
}
}
//按钮
submit.onclick = function () {
if (input1&input2&input3) {
alert("注册成功");
}else{
alert("注册失败");
}
}
</script>
</body>
</html>
1回答
-
好帮手慕粉
2020-06-01
同学你好，代码实现的是正确的。继续加油，祝学习愉快~
0
