|
|
|
|
示例 2 : 答案-删除行为前的提示 示例 3 : 练习-登陆时候，验证账号密码是否为空 示例 4 : 答案-登陆时候，验证账号密码是否为空 示例 5 : 练习-提交数据，验证长度 示例 6 : 答案-提交数据，验证长度 示例 7 : 练习-提交数据，验证年龄是否为数字 示例 8 : 答案-提交数据，验证年龄是否为数字 示例 9 : 练习-提交数据，验证年龄是否为整数 示例 10 : 答案-提交数据，验证年龄是否为整数 示例 11 : 练习-提交数据，验证email格式是否正确 示例 12 : 答案-提交数据，验证email格式是否正确 示例 13 : 练习-隐藏和显示 示例 14 : 答案-隐藏和显示
在进行删除操作前，都应该提示用户是否要删除
<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>
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
<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>
比如在登陆的时候，如果账号或者密码为空，弹出提示，并且不提交
<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>
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
<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>
<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>
<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 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>
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
<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>
上一个练习有个缺陷，即当年龄输入是小数的时候，也能够通过判断。
那么接下来就要求，年龄只能输入整数，小数也不行 <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>
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
<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>
比如注册的时候，需要提交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>
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
<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>
首先通过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>
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
<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>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2024-07-29
完整地利用 dom 对象实现HTML元素的相关操作
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2024-03-18
练习- 哈哈哈
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2022-12-23
我的答案
2021-05-23
实例1 onclick在script中添加
2021-04-22
实例1解析
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 53 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
