![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>操作classList和使用blur事件进行表单非空验证</title></head><style>.myTitle {color: blue;}.bgc {background: black;}.bor {border: 1px solid blue;}.change {color: brown;}</style><body><h3 class="myTitle">后台管理系统</h3><form action="" method="post" id="login"><label for="">用户登录</label><label for="email">邮箱</label><input type="text" name="email" id="email" value="" autofocus /><label for="pwd">密码</label><input type="password" name="password" id="password" /><button name="submit" onclick="check(this)">登录</button></form><script>//获取到h3 然后用classList方法添加样式const t = document.querySelector(".myTitle");// console.log(t);t.classList.add("bgc");t.classList.add("bor");// 去掉样式t.classList.remove("bgc");//替换 replacet.classList.replace("myTitle", "change");//动态切换 toggle() 默认有就加去掉 没有就加上t.classList.toggle("bor");</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>操作classList和使用blur事件进行表单非空验证</title></head><style>.myTitle {color: blue;}.bgc {background: black;}.bor {border: 1px solid blue;}.change {color: brown;}body {background-color: mediumturquoise;color: #444;font-weight: lighter;}</style><body><h3 class="myTitle">后台管理系统</h3><form action="" method="post" id="login"><label for="">用户登录</label><label for="email">邮箱</label><input type="text" name="email" id="email" value="" autofocus /><label for="pwd">密码</label><input type="password" name="password" id="password" /><button name="submit" onclick="check(this)">登录</button></form><button class="btn1">按钮1</button><button class="btn2">按钮2</button><button class="btn3">按钮3</button><script>// //获取到h3 然后用classList方法添加样式// const t = document.querySelector(".myTitle");// // console.log(t);// t.classList.add("bgc");// t.classList.add("bor");// // 去掉样式// t.classList.remove("bgc");// //替换 replace// t.classList.replace("myTitle", "change");// //动态切换 toggle() 默认有就加去掉 没有就加上// t.classList.toggle("bor");// // 事件属性动态添加// const btn1 = document.querySelector(".btn1");// btn1.def;// btn1.onclick = () => console.log("我是按钮one");// //事件监听// const btn2 = document.querySelector(".btn2");// const show1 = () => console.log("我是show1，因为点击1而来");// const show2 = () => console.log("我是show2，因为点击2而来");// const show3 = () => console.log("我是show3，因为点击3而来");// btn2.addEventListener("click", show1);// btn2.addEventListener("click", show2);// btn2.addEventListener("click", show3);// //事件派发// setTimeout(() => {// console.log("我是定时器");// }, 2000);// const btn3 = document.querySelector(".btn3");// let i = 0;// const getMoney = () => {// console.log("已收入 :" + i + " 元");// i += 0.5;// };// btn3.addEventListener("click", getMoney);// // 创建一个自定义事件// const myClick = new Event("click");// setInterval(() => btn3.dispatchEvent(myClick), 2000);// function check(e) {// //阻止默认行为// event.preventDefault();// // 组织冒泡// event.stopPropagation();// // 非空校验// let email = e.form.email;// // console.log(e.form.email);// let pwd = e.form.password;// if (email.value.length === 0) {// alert("邮箱不能为空");// email.focus();// return false;// } else if (pwd.value.length === 0) {// alert("密码不能为空");// pwd.focus();// return false;// } else {// alert("登录成功");// }// }document.forms.login.email.onblur = function () {event.preventDefault();// 组织冒泡event.stopPropagation();if (this.value.length === 0) {alert("邮箱不能为空");return false;}};document.forms.login.password.onblur = function () {event.preventDefault();// 组织冒泡event.stopPropagation();if (this.value.length === 0) {alert("密码不能为空");return false;}};</script></body></html>