编程练习问题
来源：3-9 编程练习
观鱼观猪
2019-06-13 14:04:41
<!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="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="green";
};
username.onblur=function(){
var pattern=/^\w{6,18}$/;
if(pattern.exec(this.value)){
spans[0].innerHTML="";
input1=true;
}
else
{
spans[0].innerHTML="请输入6-18位数字字母下划线";
spans[0].style.color="red";
}
};
chinaName.onfocus=function(){
spans[1].innerHTML="请输入2-4位汉字";
spans[1].style.color="green";
};
chinaName.onblur=function(){
var pattern=/^[\u4e00-\u9fa5]{2,4}$/;
if(pattern.exec(this.value)){
spans[1].innerHTML="";
input2=true;
}
else
{
spans[1].innerHTML="请输入2-4位汉字";
spans[1].style.color="red";
}
};
email.onfocus=function(){
spans[2].innerHTML="请输入邮箱";
spans[2].style.color="green";
};
email.onblur=function(){
var pattern=/^\w+@\w+\.[a-zA-Z]{2,4}$/;
if(pattern.exec(this.value)){
spans[1].innerHTML="";
input3=true;
}
else
{
spans[1].innerHTML="格式不对";
spans[1].style.color="red";
}
};
submit.onclick=function(){
if(input1===true&&input2===true&&input3===true){
alert("注册成功");
}
else
{
alert("请按要求输入");
}
};
</script>
</body>
</html>
老师，有两个问题。1这样点提交，如果注册不成功时，依然会跳转页面，题目要求停留在该页面，如何操作啊？
2这样写的正则有没有错误啊？
1回答
-
同学你好！
代码中的问题（1）：
邮箱如果输入正确，失焦事件中应该是没有文字提示的
可参考修改：
（2）关于点击提交可参考修改：
如果帮助到了你 欢迎采纳 祝学习愉快~
0
相似问题