js-基础（五）classList对象、blur事件进行表单非空验证

1.classList对象

const box = document.querySelector(".box");
//parseInt()字符串转换为数字
//window.getComputedStyle()全局方法获取计算样式(内部样式和外部样式)
let borderWidth = parseInt(window.getComputedStyle(box).borderWidth) + 5;
box.style.borderWidth = borderWidth + "px";
//添加
box.classList.add("backgroundColor");
//判断
console.log(box.classList.contains("backgroundColor"));
//移除
box.classList.remove("backgroundColor");
//替换('旧值','新值')
box.classList.replace("box", "borderChange");
//切换,类名有则移除,没有则添加
box.classList.toggle("colorChange");
box.classList.toggle("borderChange");

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

function check(element) {
  //禁用默认行为
  event.preventDefault();
  //阻止冒泡
  event.stopPropagation();
  let email = element.form.email;
  let password = element.form.password;
if (email.value.length === 0) {
    alert("邮箱为空");
    email.focus();
    return false;
  } else if (password.value.length === 0) {
    alert("密码为空");
    password.focus();
    return false;
  } else {
    return true;
  }
}
//blur失去焦点时触发
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;
  }
};