how2j.cn


工具版本兼容问题
所谓的常用场景指的是工作中会经常用到的javascript结合HTML DOM运用。

示例 1 : 练习-删除行为前的提示   
示例 2 : 答案-删除行为前的提示   
示例 3 : 练习-登陆时候,验证账号密码是否为空   
示例 4 : 答案-登陆时候,验证账号密码是否为空   
示例 5 : 练习-提交数据,验证长度   
示例 6 : 答案-提交数据,验证长度   
示例 7 : 练习-提交数据,验证年龄是否为数字   
示例 8 : 答案-提交数据,验证年龄是否为数字   
示例 9 : 练习-提交数据,验证年龄是否为整数   
示例 10 : 答案-提交数据,验证年龄是否为整数   
示例 11 : 练习-提交数据,验证email格式是否正确   
示例 12 : 答案-提交数据,验证email格式是否正确   
示例 13 : 练习-隐藏和显示   
示例 14 : 答案-隐藏和显示   

示例 1 :

练习-删除行为前的提示

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
在进行删除操作前,都应该提示用户是否要删除
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

答案-删除行为前的提示

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

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

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
比如在登陆的时候,如果账号或者密码为空,弹出提示,并且不提交
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

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

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 5 :

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

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
比如注册用户名的时候,用户名至少需要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>
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 6 :

答案-提交数据,验证长度

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<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>
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 7 :

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

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
比如注册的时候,需要提交年龄信息,用户输入的年龄信息必须是数字的。
<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(isNaN(age.value)){ alert("年龄必须是数字"); return false; } return true; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 8 :

答案-提交数据,验证年龄是否为数字

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 9 :

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

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
上一个练习有个缺陷,即当年龄输入是小数的时候,也能够通过判断。
那么接下来就要求,年龄只能输入整数,小数也不行
<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(parseInt(age.value)!=age.value){ alert("年龄必须是整数"); return false; } return true; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 10 :

答案-提交数据,验证年龄是否为整数

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<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(parseInt(age.value)!=age.value){ alert("年龄必须是整数"); return false; } return true; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 11 :

练习-提交数据,验证email格式是否正确

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
比如注册的时候,需要提交email信息,用户输入的email信息必须是电子邮箱格式的。
<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> EMail:<input id="email" type="text" name="email"> <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(isNaN(age.value)){ alert("年龄必须是数字"); return false; } var email = document.getElementById("email"); if(0==email.value.length){ alert("email不能为空"); return false; } var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/; if (!Regex.test(email.value)){ alert("email格式不正确"); return false; } return true; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 12 :

答案-提交数据,验证email格式是否正确

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<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> EMail:<input id="email" type="text" name="email"> <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(isNaN(age.value)){ alert("年龄必须是数字"); return false; } var email = document.getElementById("email"); if(0==email.value.length){ alert("email不能为空"); return false; } var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/; if (!Regex.test(email.value)){ alert("email格式不正确"); return false; } return true; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 13 :

练习-隐藏和显示

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
首先通过document.getElementById 拿到div对应的节点
然后通过修改节点的style.display的值进行隐藏和显示
<button onclick="hide()">隐藏div</button> <button onclick="show()">显示div</button> <br> <br> <div id="d"> 这是一个div </div> <script> function hide(){ var d = document.getElementById("d"); d.style.display="none"; } function show(){ var d = document.getElementById("d"); d.style.display="block"; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 14 :

答案-隐藏和显示

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<button onclick="hide()">隐藏div</button> <button onclick="show()">显示div</button> <br> <br> <div id="d"> 这是一个div </div> <script> function hide(){ var d = document.getElementById("d"); d.style.display="none"; } function show(){ var d = document.getElementById("d"); d.style.display="block"; } </script>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-11-03 没有积分的看这里,例11答案,站主的答案,我把它粘出来
淅淅细雨



邮件格式,例7例8代码也在这里
<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>
   
EMail:<input id="email" type="text" name="email">
<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(isNaN(age.value)){
     alert("年龄必须是数字");
     return false;
   }
   
  var email = document.getElementById("email");
        
  if(0==email.value.length){
     alert("email不能为空");
    return false;
  }
     
  var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;      
     
  if (!Regex.test(email.value)){               
       alert("email格式不正确");
       return false;
  }           
   return true;
  }
</script>

							


1 个答案

Manjaro 答案时间:2018-11-16
谢了




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-11-03 交例11作业
淅淅细雨



代码粗糙,欢迎大家指正
<html>
<script>
function p(){
var d1=document.getElementById("d1").value
var d2=document.getElementById("d2").value
var d3=document.getElementById("d3").value
var d4=new String(d3)
var num1=d4.indexOf("@")
var num2=d4.indexOf(".")

if(d1.length<3){
alert("账号名至少需要3位")
return false
}

else if(isNaN(d2)==true || d2.length==0){
alert("年龄必须是数字")
return false
}

else if(num1<1 || num2<1 || num1==(num2-1) || d3.length==0){
alert("EMail格式不正确")
return false
}

else
return true

}
</script>
<body>
<form action="./login.html" onsubmit="return p()">
<table>
<tr>
<td>账号</td>
<td><input type="text" id="d1"></td>
</tr>

<tr>
<td>年龄</td>
<td><input type="text" id="d2"></td>
</tr>

<tr>
<td>EMail</td>
<td><input type="text" id="d3"></td>
</tr>
</table>
<input type="submit">
</form>
</body>
</html>

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2018-10-06 交个作业1
2018-08-10 有问题要问
2018-03-26 关于实例一有疑惑
2017-09-13 示例十年龄为负数也可以。。
2017-07-21 练习1问题
2017-06-16 最后一题需要解释
2017-06-16 怎么前面没有讲关于表格对象的操作教程
2017-05-06 正则表达式一脸茫然
2017-04-18 积分不够怎么办,很影响啊!
2017-03-01 积分不足,看不了答案,有点想放弃了
2016-12-23 答案能不能购买呢,积分确实不多,也没有太好的途径获得积分
2016-11-09 示例8年龄为空也可以提交
2016-08-22 示例10的答案不对。




提问之前请登陆
关于 前端部分-HTML DOM-常用场景 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图