首页 > Web开发 > 详细

HTML DOM 10 常用场景

时间:2020-07-26 12:49:04      阅读:74      评论:0      收藏:0      [点我收藏+]

示例 1 : 

练习-删除行为前的提示 

在进行删除操作前,都应该提示用户是否要删除

技术分享图片

 

 

<script>
function deleteRow(link){
 var b =  confirm("确定删除?")
 if(!b)
   return;
 
var table = document.getElementById("heroTable");
var td = link.parentNode;
var tr = td.parentNode;
var index=tr.rowIndex;
table.deleteRow(index);
 
}
</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>
 
</table>

 示例 2 : 

练习-登陆时候,验证账号密码是否为空

技术分享图片

 

 

<form method="post" action="/study/login.jsp" onsubmit="return login()">
账号:<input id="name" type="text" name="name"> <br/>
密码:<input id="password" type="password" name="password" > <br/>
<input type="submit" value="登陆">
</form>
   
<script>
  function login(){
   var name = document.getElementById("name");
   if(name.value.length==0){
     alert("用户名不能为空");
     return false;
   }
 
   var password = document.getElementById("password");
   if(password.value.length==0){
     alert("密码不能为空");
     return false;
   }
 
   return true;
 
  }
</script>

示例 3 : 

练习-提交数据,验证长度 

 

<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号:<input id="name" type="text" name="name">
<br><br>
<input type="submit" value="注册">
<br>
</form>
    
<script>
  function register(){
   var name = document.getElementById("name");
   if(name.value.length<3){
     alert("用户名至少需要3位长度");
     return false;
   }
  
   return true;
  
  }
</script>

示例 4 : 

练习-提交数据,验证年龄是否为数字 

技术分享图片

 

 

<form method="post" action="/study/register.jsp" onsubmit="return register()">
账号:<input id="name" type="text" name="name">
<br><br>
 
年龄:<input id="age" type="text" name="age">
<br><br>
<input type="submit" value="注册">
<br>
</form>
     
<script>
  function register(){
   var name = document.getElementById("name");
   if(name.value.length<3){
     alert("用户名至少需要3位长度");
     return false;
   }
 
   var age = document.getElementById("age");
   if(age.value.length==0){
     alert("年龄不能为空");
     return false;
   }
   if(isNaN(age.value)){
     alert("年龄必须是数字");
     return false;
   }
   
   return true;
   
  }
</script>

 

HTML DOM 10 常用场景

原文:https://www.cnblogs.com/JasperZhao/p/13379128.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!