Javascript DOM常用场景（1.删除行为前的提示 2.登陆时候，验证账号密码是否为空 3.判断密码是否是数字（整数） 4.验证email格式是否正确）

本文链接：https://blog.csdn.net/qq_37758122/article/details/108410772

1.删除行为前的提示（在进行删除操作前，都应该提示用户是否要删除）

<head>
    <meta charset="UTF-8">
    <title>哈哈哈哈</title>
</head>

<script>
  function deleteRow(link){
    b = confirm("确定删除？");
    if (!b)
       return;
    table = document.getElementById("heroTable");
    td = link.parentNode;
    tr = td.parentNode;
    index = tr.rowIndex;           //.rowindex()获取行位置
    table.deleteRow(index);      //.deleteRow()方法用于从表格删除指定位置的行
}
</script>

<table width="100%" border="1"cellspacing="0" id="heroTable">

<tr>
  <td width="50%">英雄名称</td>
  <td>操作</td>
</tr>

<tr>
 <td>盖伦</td>
 <td><a href="#" onclick="deleteRow(this)">删除</a></td>
</tr>

<tr>
  <td>提莫</td>
  <td><a href="#" onclick="deleteRow(this)">删除</a></td>
</tr>

<tr>
  <td>亚瑟</td>
  <td><a href="#" onclick="deleteRow(this)">删除</a></td>
</tr>

</tabel>

2.登陆时候，验证账号密码是否为空（比如在登陆的时候，如果账号或者密码为空，弹出提示，并且不提交）

<head>
    <meta charset="UTF-8">
    <title>哈哈哈哈</title>
</head>

<script>
 function checkEmpty(){
  userName = document.getElementById("userName").value;
  password = document.getElementById("password").value;
  if(userName.length==0)
     alert("账号为空");
  if(password.length==0)
     alert("密码为空");
}

</script>
账号:<input type="text" placeholder="请输入账号" id="userName">
密码:<input type="password" placeholder="请输入密码" id="password">
<br/>
<input type="button" value="登录" onclick="checkEmpty()">

3.isNaN(a)判断a是否为数字
4.上一个练习有个缺陷，即当年龄输入是小数的时候，也能够通过判断。
那么接下来就要求，年龄只能输入整数，小数也不行

<head>
    <meta charset="UTF-8">
    <title>哈哈哈哈</title>
</head>

<script>
 function checkEmpty(){
  userName = document.getElementById("userName").value;
  password = document.getElementById("password").value;
 
 if(userName.length<3)
     alert("用户名至少需要3位长度");
  
 if(parseInt(password)!=password){
      alert("密码必须是整数");

  }

}

</script>
账号:<input type="text" placeholder="请输入账号" id="userName">
密码:<input type="password" placeholder="请输入密码" id="password">
<br/>
<input type="button" value="登录" onclick="checkEmpty()">

5.验证email格式是否正确

<head>
    <meta charset="UTF-8">
    <title>哈哈哈哈</title>
</head>

账号: <input type="text" id="name"><br>
年龄: <input type="text" id="age"><br>
Email: <input type="text" id="email"><br>
<input type="button" value="注册" onclick="get()">
<script>
    function get() {
        var email = document.getElementById("email").value;
        //^表示开头,加号表示一个或多个,$表示结尾
        var reg = /^[0-9a-zA-Z]+@\w+\.\w+$/;
        if (email.length == 0) {
            alert("email不能为空");
        } else if ( !reg.test(email)) {
            alert("email格式不正确");
        }
    }
</script>