js扩展

  • 提示框
    • alert()：只有确定按钮的提示框
    • confirm()：包含【确定和取消按钮】的提示框
  • 取消默认行为
    • return false
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登录页面</title>
</head>
<body>
<h2>登录页面-用户名&密码&提交</h2>
<form action="login_success.html" method="get">
  用户名：<input id="userName" type="text" name="userName" placeholder="请输入用户名" value=""><br>
  密码：<input id="pwd" type="password" name="pwd" placeholder="请输入密码" value=""><br>
  <input id="bthSub" type="submit" value="登录">
</form>
<br>
<a href="../index.html">回首页</a><br>
<a id="aEle" href="login_success.html">删除Book信息</a>
</body>
<script type="text/javascript">
  /*实现非空验证*/
  var bthsubEle = document.getElementById("bthSub");
  bthsubEle.onclick = function () {
    var unValue = document.getElementById("userName").value;
    if (unValue == "") {
      alert("用户名不可以为空，请重新输入");
      //取消默认行为
      return false;
    }
    var pwdValue = document.getElementById("pwd").value;
    if (pwdValue == "") {
      alert("密码不可以为空，请重新输入");
      //取消默认行为
      return false;
    }
  }

  //超链接js案例
  var aEle = document.getElementById("aEle");
  aEle.onclick = function () {
    //confirm()：包含【确定和取消按钮】的提示框
   var yOn =  confirm("是否删除信息");
   if (yOn == false){
     //取消超链接默认行为
     return false;
   }
  }
</script>
</html>