操作classList和使用blur事件进行表单非空验证
操作classList
<!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"); //替换 replace t.classList.replace("myTitle", "change"); //动态切换 toggle() 默认有就加去掉 没有就加上 t.classList.toggle("bor"); </script> </body></html>
使用blur事件进行表单非空验证
<!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>
