请老师检查
来源：3-9 编程练习
嘟嘟苏
2020-06-28 00:18:16
<!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(){
if(this.value == ""){
spans[0].innerHTML = "请输入6-12位的数字,字母,下划线";
}
}
username.onblur = function(){
var pattern = /^\w{6,12}$/;
if(this.value == ""){
spans[0].innerHTML = "不能为空";
}else{
if(!pattern.test(username.value)){
spans[0].innerHTML = "格式不正确";
}else{
spans[0].innerHTML = "格式正确";
input1 = true;
}
}
}
chinaName.onfocus = function(){
if(this.value == ""){
spans[1].innerHTML = "请输入中文名字";
}
}
chinaName.onblur = function(){
var pattern = /^[\u4e00-\u9fa5]{2,4}$/;
if(this.value == ""){
spans[1].innerHTML = "名字不能为空";
}else{
if(!pattern.test(this.value)){
spans[1].innerHTML = "格式不正确"
}else{
spans[1].innerHTML = "格式正确";
input2 == true
}
}
}
email.onfocus = function(){
if(this.value == ""){
spans[2].innerHTML = "请输入邮箱";
}
}
email.onblur = function(){
var pattern = /^\w+@\w+\.[a-zA-Z_]{2,4}(?:\.[a-zA-Z]{2,3})?$/;
if(this.value == ""){
spans[2].innerHTML = "邮箱不能为空";
}else{
if(!pattern.test(this.value)){
spans[2].innerHTML = "格式不正确"
}else{
spans[2].innerHTML = "格式正确";
input3 == true
}
}
}
submit.onclick = function(){
if(input1 == true && input2 == true && input3 == true){
alert("提交成功");
}else{
alert("请输入正确");
}
}
</script>
</body>
</html>
1回答
-
同学你好，代码中有如下问题：
1. 输入框中什么都不输入，直接点击“注册”按钮，会弹出“请输入正确”的弹框，点击弹框上的“确定”按钮，会刷新一下页面。
这是由于提交表单时，表单有默认的刷新行为，可以使用“return false”禁掉该默认行为，不让页面刷新，如下：
2. 代码存在书写错误，变量赋值要写成“=”，不是“==”，如下：
3. 全部输入正确后，再修改其中一项不符合验证规则，还可以提交成功：
原因是没有在验证不通过时，修改对应变量为false，以username为例，修改如下:
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题