search

博客列表 >操作classList和使用blur事件进行表单非空验证

操作classList和使用blur事件进行表单非空验证

centos
centos原创
2022年07月24日 21:41:29411浏览

操作classList和使用blur事件进行表单非空验证

操作classList

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>操作classList和使用blur事件进行表单非空验证</title>
  8.   </head>
  9.   <style>
  10.     .myTitle {
  11.       color: blue;
  12.     }
  13.     .bgc {
  14.       background: black;
  15.     }
  16.     .bor {
  17.       border: 1px solid blue;
  18.     }
  19.     .change {
  20.       color: brown;
  21.     }
  22.   </style>
  23.   <body>
  24.     <h3 class="myTitle">后台管理系统</h3>
  25.     <form action="" method="post" id="login">
  26.       <label for="">用户登录</label>
  27.       <label for="email">邮箱</label>
  28.       <input type="text" name="email" id="email" value="" autofocus />
  29.       <label for="pwd">密码</label>
  30.       <input type="password" name="password" id="password" />
  31.       <button name="submit" onclick="check(this)">登录</button>
  32.     </form>
  33.     <script>
  34.       //获取到h3  然后用classList方法添加样式
  35.       const t = document.querySelector(".myTitle");
  36.       // console.log(t);
  37.       t.classList.add("bgc");
  38.       t.classList.add("bor");
  39.       // 去掉样式
  40.       t.classList.remove("bgc");
  41.       //替换 replace
  42.       t.classList.replace("myTitle", "change");
  43.       //动态切换 toggle() 默认有就加去掉  没有就加上
  44.       t.classList.toggle("bor");
  45.     </script>
  46.   </body>
  47. </html>

使用blur事件进行表单非空验证

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>操作classList和使用blur事件进行表单非空验证</title>
  8.   </head>
  9.   <style>
  10.     .myTitle {
  11.       color: blue;
  12.     }
  13.     .bgc {
  14.       background: black;
  15.     }
  16.     .bor {
  17.       border: 1px solid blue;
  18.     }
  19.     .change {
  20.       color: brown;
  21.     }
  22.     body {
  23.       background-color: mediumturquoise;
  24.       color: #444;
  25.       font-weight: lighter;
  26.     }
  27.   </style>
  28.   <body>
  29.     <h3 class="myTitle">后台管理系统</h3>
  30.     <form action="" method="post" id="login">
  31.       <label for="">用户登录</label>
  32.       <label for="email">邮箱</label>
  33.       <input type="text" name="email" id="email" value="" autofocus />
  34.       <label for="pwd">密码</label>
  35.       <input type="password" name="password" id="password" />
  36.       <button name="submit" onclick="check(this)">登录</button>
  37.     </form>
  38.     <button class="btn1">按钮1</button>
  39.     <button class="btn2">按钮2</button>
  40.     <button class="btn3">按钮3</button>
  41.     <script>
  42.       // //获取到h3  然后用classList方法添加样式
  43.       // const t = document.querySelector(".myTitle");
  44.       // // console.log(t);
  45.       // t.classList.add("bgc");
  46.       // t.classList.add("bor");
  47.       // // 去掉样式
  48.       // t.classList.remove("bgc");
  49.       // //替换 replace
  50.       // t.classList.replace("myTitle", "change");
  51.       // //动态切换 toggle() 默认有就加去掉  没有就加上
  52.       // t.classList.toggle("bor");
  53.       // // 事件属性动态添加
  54.       // const btn1 = document.querySelector(".btn1");
  55.       // btn1.def;
  56.       // btn1.onclick = () => console.log("我是按钮one");
  57.       // //事件监听
  58.       // const btn2 = document.querySelector(".btn2");
  59.       // const show1 = () => console.log("我是show1，因为点击1而来");
  60.       // const show2 = () => console.log("我是show2，因为点击2而来");
  61.       // const show3 = () => console.log("我是show3，因为点击3而来");
  62.       // btn2.addEventListener("click", show1);
  63.       // btn2.addEventListener("click", show2);
  64.       // btn2.addEventListener("click", show3);
  65.       // //事件派发
  66.       // setTimeout(() => {
  67.       //   console.log("我是定时器");
  68.       // }, 2000);
  69.       // const btn3 = document.querySelector(".btn3");
  70.       // let i = 0;
  71.       // const getMoney = () => {
  72.       //   console.log("已收入 :" + i + " 元");
  73.       //   i += 0.5;
  74.       // };
  75.       // btn3.addEventListener("click", getMoney);
  76.       // // 创建一个自定义事件
  77.       // const myClick = new Event("click");
  79.       // setInterval(() => btn3.dispatchEvent(myClick), 2000);
  80.       // function check(e) {
  81.       //   //阻止默认行为
  82.       //   event.preventDefault();
  83.       //   // 组织冒泡
  84.       //   event.stopPropagation();
  85.       //   // 非空校验
  86.       //   let email = e.form.email;
  87.       //   // console.log(e.form.email);
  88.       //   let pwd = e.form.password;
  89.       //   if (email.value.length === 0) {
  90.       //     alert("邮箱不能为空");
  91.       //     email.focus();
  92.       //     return false;
  93.       //   } else if (pwd.value.length === 0) {
  94.       //     alert("密码不能为空");
  95.       //     pwd.focus();
  96.       //     return false;
  97.       //   } else {
  98.       //     alert("登录成功");
  99.       //   }
  100.       // }
  101.       document.forms.login.email.onblur = function () {
  102.         event.preventDefault();
  103.         // 组织冒泡
  104.         event.stopPropagation();
  105.         if (this.value.length === 0) {
  106.           alert("邮箱不能为空");
  107.           return false;
  108.         }
  109.       };
  110.       document.forms.login.password.onblur = function () {
  111.         event.preventDefault();
  112.         // 组织冒泡
  113.         event.stopPropagation();
  114.         if (this.value.length === 0) {
  115.           alert("密码不能为空");
  116.           return false;
  117.         }
  118.       };
  119.     </script>
  120.   </body>
  121. </html>
上一条：访问器属性,(class简化)构造函数以及解构赋值详解下一条：实现自有,共享,静态成员的声明与输出的类/实例演示数组与对象解构方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多