3-9 编程练习作业提交
来源：3-9 编程练习
MiMicccc
2021-05-19 18:25:35
<!--
* @Author: your name
* @Date: 2020-08-16 20:53:51
* @LastEditTime: 2021-05-19 18:24:31
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \test\test.html
-->
<!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;
// 判断输入账户名
username.onfocus = function () {
spans[0].innerHTML = "请输入6-18位数字，字母，下划线";
}
username.onblur = function () {
var pattern = /^\w{6,18}$/;
if (this.value == "") {
spans[0].innerHTML = "账户名不能为空";
} else {
if (!pattern.exec(username.value)) {
spans[0].innerHTML = "格式不正确";
} else {
spans[0].innerHTML = "";
input1 = true;
}
}
}
// 判断输入中文名
chinaName.onfocus = function () {
spans[1].innerHTML = "请输入中文名";
}
chinaName.onblur = function () {
var pattern = /^[\u4e00-\u9fa5]{2,4}$/;
if (this.value == "") {
spans[1].innerHTML = "中文名不能为空";
} else {
if (!pattern.exec(chinaName.value)) {
spans[1].innerHTML = "格式不正确";
} else {
spans[1].innerHTML = "";
input2 = true;
}
}
}
// 判断输入邮箱
email.onfocus = function () {
spans[2].innerHTML = "请输入邮箱";
}
email.onblur = function () {
var pattern = /^\w+@\w+\.[a-zA-Z_]{2,4}$/;
if (this.value == "") {
spans[2].innerHTML = "邮箱不能为空";
} else {
if (!pattern.exec(email.value)) {
spans[2].innerHTML = "格式不正确";
} else {
spans[2].innerHTML = "";
input3 = true;
}
}
}
// 点击注册按钮
submit.onclick = function () {
if (input1 == false || input2 == false || input3 == false) {
alert("提交失败！您填写的信息有误！");
} else {
alert("提交成功！")
}
}
</script>
</body>
</html>
写回答
1回答
-
好帮手慕言
2021-05-19
同学你好，第一次都验证正确之后，把其中一个再改为不符合要求的，点击按钮，还是会提示“提交成功”，如下：
这是因为在验证时匹配正确了之后，就把标识符修改为了true，在验证时匹配错误之后没有修改为false，以第一个为例，修改如下：
其他的两个验证同学可以自己修改一下，祝学习愉快~
0
相似问题