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");

演示classList和表单非空验证

classList

表单非空验证

更多相关文章

随机推荐