1.js操作class

<!DOCTYPE html>
<html lang="zh-CN">
  <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>js操作class</title>
    <style>
      .title {
        border: 1px solid blue;
      }
      .fontColor {
        color: orangered;
      }
      .bgc {
        background-color: cyan;
      }
      .bgc2 {
        background-color: wheat;
      }
      .fontColor2 {
        color: blueviolet;
      }
    </style>
  </head>
  <body>
    <h2 class="title">用js操作class</h2>
    <script>
      const h2 = document.querySelector(".title");
      //   方法：classList
      //   添加：add()
      //   修改字体颜色和背景
      //   h2.classList.add("fontColor");
      //   h2.classList.add("bgc");
      h2.classList.add("fontColor", "bgc");
      //   判断:contains(),是否具有”active“属性:如果有返回：true,没有返回：false
      console.log(h2.classList.contains("fontColor"));
      console.log(h2.classList.contains("bgc2"));
      //   移除：romove()
      //   移除背景色
      h2.classList.remove("bgc");
      //   替换：replace()
      //   把"fontColor"替换成 "fontColor2"
      h2.classList.replace("fontColor", "fontColor2");
      //   动态切换class：toggle()
      //   如果之前没有’bgc2‘这个样式就加上，如果有就取消
      //   h2.classList.add("bgc2");
      h2.classList.toggle("bgc2");
    </script>
  </body>
</html>

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

<!DOCTYPE html>
<html lang="zh-CN">
  <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>表单事件</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- 2.禁用表单提交行为：  onsubmit="return false;" -->
    <form action="" method="post" id="login">
      <label class="title">用户登录</label>
      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" value="" autofocus />
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" />
      <!-- 1.禁用表单提交行为： type="button" 来表示这是一个普通按钮,没有提交行为 -->
      <button name="submit" onclick="check(this)">登录</button>
    </form>
    <script>
      function check(ele) {
        // console.log(ele);
        //   3.(推荐动作1)禁用默认表单提交行为：preventDefault
        event.preventDefault();
        // (推荐动作2)防止冒泡
        event.stopPropagation();
        // (推荐动作3)非空验证
        // 每一个表单控件input, 都有一个form属性;
        console.log(ele.form);
        // 通过form属性可以获取到表单中所有元素的值;
        // console.log(ele.form.email);
        let email = ele.form.email;
        let password = ele.form.password;
        // if (email.value.length === 0) {
        //   alert("邮箱不能为空，请输入");
        //   email.focus();
        //   return false;
        // } else if (password.value.length === 0) {
        //   alert("密码不能为空，请输入");
        //   email.focus();
        //   return false;
        // } else {
        //   alert("验证通过，正在提交");
        // }
      }
      // 失去焦点时触发
      document.forms.login.email.onblur = function () {
        if (this.value.length === 0) {
          alert("邮箱不能为空");
          return false;
        }
      };
      document.forms.login.password.onblur = function () {
        if (this.value.length === 0) {
          alert("密码不能为空");
          return false;
        }
      };
      //change值发生改变且失去焦点时触发
      document.forms.login.email.onchange = function () {
        console.log("邮箱已改变");
      };
      //input值发生改变时触发
      document.forms.login.password.oninput = function () {
        console.log(this.value);
      };
    </script>
  </body>
</html>

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

1.js操作class

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