简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 操作classList和使用blur事件进行表单非空验证
Blogger Information
Blog 28
fans 0
comment 1
visits 13111
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
操作classList和使用blur事件进行表单非空验证
centos
Original
404 people have browsed it

操作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>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！