3-9 编程练习
来源：3-9 编程练习
maggiecl
2019-06-04 16:35:32
<!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="请输入账户名"></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="button" 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
username.onfocus = function(){
spans[0].innerHTML = "请输入6-18位字母、数字、下划线";
};
username.onblur = function(){
var reg = /^\w{6,18}$/;
if(!reg.exec(username.value)){
spans[0].innerHTML ="格式不正确";
input1 = false;
}else{
spans[0].innerHTML ="";
input1 = true;
}
};
// chinaName
chinaName.onfocus = function(){
spans[1].innerHTML = "请输入中文名字";
};
chinaName.onblur = function(){
var reg = /^[\u4e00-\u9fa5]{2,4}$/;
if(!reg.exec(chinaName.value)){
spans[1].innerHTML ="格式不正确";
input2 = false;
}else{
spans[1].innerHTML ="";
input2 = true;
}
};
email.onfocus = function(){
spans[2].innerHTML = "请输入邮箱";
};
email.onblur = function(){
var reg = /^\w+@\w+\.[a-zA-Z_]{2,4}$/;
if(!reg.exec(email.value)){
spans[2].innerHTML ="格式不正确";
input3 = false;
}else{
spans[2].innerHTML ="";
input3 = true;
}
};
// submit
submit.onclick = function(){
username.onblur();
chinaName.onblur();
email.onblur();
if(input1==false || input2==false || input3==false){
alert("请按照要求完整填写信息");
}else{
alert("注册成功");
}
};
</script>
</body>
</html>
这样写可以吗？有需要优化的吗？
1回答
-
你好同学，效果实现的正确，不用修改了哦，很棒，祝学习愉快！
0
相似问题