麻烦老师检查
来源：3-9 编程练习
最后的魔法使
2020-05-08 20:04:34
<!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;
var reg = {
usr: /^\w{6,18}$/,
chusr: /^[\u4e00-\u9fa5]{2,4}$/,
mail: /^\w+@(\w+\.)+[a-zA-Z]{2,4}$/
};
var desc = {
usr: '请输入6-18位字母、数字、下划线',
chusr: '请输入中文名字',
mail: '请输入邮箱',
error: '格式不正确'
};
username.onfocus = function () {
spans[0].innerHTML = desc.usr;
};
chinaName.onfocus = function () {
spans[1].innerHTML = desc.chusr;
};
email.onfocus = function () {
spans[2].innerHTML = desc.mail;
};
username.onblur = function () {
if (reg.usr.test(username.value)) {
spans[0].innerHTML = '';
input1 = true;
} else spans[0].innerHTML = desc.error;
}
chinaName.onblur = function () {
if (reg.chusr.test(chinaName.value)) {
spans[1].innerHTML = '';
input2 = true;
} else spans[1].innerHTML = desc.error;
}
email.onblur = function () {
if (reg.mail.test(email.value)) {
spans[2].innerHTML = '';
input3 = true;
} else spans[2].innerHTML = desc.error;
}
submit.onclick = function () {
if (input1 && input2 && input3) alert('注册成功');
else alert('请按照要求填写完整信息');
}
</script>
</body>
</html>
1回答
-
同学你好，代码中存在如下问题：
先在三个输入框中都输入符合要求的字符，然后改变其中一个输入框的内容为不符合要求，点击注册，会提示注册成功：
原因是在输入不符合要求的语句中，没有将该输入框的标志置为false，以用户名为例，修改如下：
2. 优化建议：当输入不符合要求，点击注册后，会弹出“请按照要求填写完整信息”的弹窗，点击弹框的确定按钮，页面会刷新一下，可以禁止该默认的刷新行为，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
1
相似问题