演示classList和表单非空验证

classList

• classList.add（）添加
  h3.classList.add('active');
• classList.remove() 移除样式
  h3.classList.remove('bgc');
• classList.replace()替换*里面有两个值 第一个是原来的，第二个是将要替换的
  h3.classList.replace('active','aaa')

• toggle()动态切换如果之前有这个样式 就去掉，没有择加上
  h3.classList.toggle('bgc2');

  表单非空验证

       function chen(aa) {
        console.log(aa);
       //去掉submit提交方法
      event.preventDefault();
      //阻止冒泡
      event.stopPropagation();
      //每个ipnt都有form属性
      console.log(aa.form);
      //     //拿到form中的用户名
      console.log(aa.form.username);
      let name = aa.form.username;
      //     //拿到form中的密码
      console.log(aa.form.password);
      let password = aa.form.password;
      //判断非空
      if (name.value.length === 0) {
          alert('用户名不能为空');
          return false;
      } else if (password.value.length === 0) {
          alert('请输入密码');
          return false;
      } else {
          alert('登录成功');
      }
       }
        //blur失去焦点触发
        // const la = document.forms.log.username;
       // console.log(la);
        document.forms.log.username.onblur = function () {
      if(this.value.length === 0){
          alert('请输入用户名');
          return false;
      }else if(document.forms.log.password.onblur=function(){
          if(this.value.length === 0){
              //alert('请输入密码');
              return false;
          }
      }){
        }
        }
       //input,值发改变就触发，不必等失去焦点
      document.forms.log.password.oninput = function () {
          console.log("123");