实例演示classList对象和blur事件

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     .bgc {
  11.       background-color: blue;
  12.     }
  13.     .bgc2 {
  14.       background-color: yellow;
  15.     }
  16.     .active {
  17.       color: red;
  18.     }
  19.     .boder {
  20.       border: 1px solid black;
  21.     }
  22.     .title {
  23.       font-size: 60px;
  24.     }
  25.   </style>
  27.   <body>
  28.     <h2 class="title">Hello World</h2>
  29.     <script>
  30.       const h2 = document.querySelector('.title');
  32.       // 添加
  33.       h2.classList.add('active');
  34.       h2.classList.add('bgc');
  36.       // 判断
  37.       console.log(h2.classList.contains('hello') ? 'hello world' : 'hello php');
  39.       // 移除
  40.       h2.classList.remove('bgc');
  42.       // 替换
  43.       h2.classList.replace('active', 'bgc2');
  45.       // 动态切换
  46.       h2.classList.toggle('boder');
  47.     </script>
  49.     <!-- 表单非空验证 -->
  50.     <form action="" method="post" id="login">
  51.       <label for="email">邮箱:</label>
  52.       <input type="email" id="email" name="email" value="" autofocus />
  53.       <label for="password">密码:</label>
  54.       <input type="password" id="password" name="password" />
  55.       <!-- 1. type="button" 来表示这是一个普通按钮,没有提交行为 -->
  56.       <button type="button" name="submit" onclick="check(this)">登录</button>
  57.     </form>
  59.     <!-- 表单非空验证 -->
  60.     <script>
  61.       //点击button触发check函数进行验证
  62.       function check(ele) {
  63.         // 禁用默认行为
  64.         event.preventDefault();
  65.         // 防止冒泡
  66.         event.stopPropagation();
  67.         // 非空验证
  68.         // 每一个表单控件input,都有一个form属性,指向所属的表单元素
  69.         // 通过form属性可以获取到表单中所有元素的值
  70.         let email = ele.form.email;
  71.         let password = ele.form.password;
  72.         if (email.value.length === 0) {
  73.           email.setAttribute('placeholder', '邮箱不能为空，请输入');
  74.           email.focus();
  75.           return false;
  76.         } else if (password.value.length === 0) {
  77.           password.setAttribute('placeholder', '密码不能为空，请输入');
  78.           password.focus();
  79.           return false;
  80.         }
  81.       }
  83.       // 失去焦点验证;
  84.       document.forms.login.email.onblur = function () {
  85.         if (this.value.length === 0) {
  86.           this.setAttribute('placeholder', '不能为空，请输入');
  87.           return false;
  88.         }
  89.       };
  90.     </script>
  91.   </body>
  92. </html>