一、删除行为前的提示

首先要有一个onclick的DOM(点击)事件,和一个JavaScript弹出框:confirm()确认框

<script>
function del(){
var d = confirm("是否要删除【内容可变】");//返回基本类型的Boolean true或者false
if(d) return true;//进行删除操作
else
return false;//返回上一个操作
}
</script> <br>
<button onclick="del()">删除</button>

如果是表格里一行“表面”数据的简单删除(利用javascript结合HTML DOM)

<script>
function deleteRoW(link【参数名可变】){
var d=confirm("确定删除?【内容可变】");
if(d) {
var table = document.getElementById("heroTable");
var td = link.parentNode;
var tr = td.parentNode;
var index=tr.rowIndex;
table.deleteRow(index);
}else
return false; }
</script> <table id="heroTable">
<tr >
<td>英雄名称</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>

如果是CRUD业务中的删除(利用javascript结合JQuery)

<!--给用于删除的超链a,设置一共自定义属性deleteLink="true"-->
<!--因为同时存在着用于修改的超链a,为了区别不同用途的a,用是否含有自定义属性的deleteLink来区别--> <a deleteLink【属性名可变】="true" href="admin_category_delete?id=${c.id}"><span class=" glyphicon glyphicon-trash"></span></a>
//对所有的删除连接都进行了监听:
$(function(){
$("a").click(function(){
var deleteLink = $(this).attr("deleteLink");
console.log(deleteLink);//【可去掉】
if("true"==deleteLink){
var d = confirm("确认要删除");
if(d)
return true;
return false; }
});
})

二、登陆时候,验证账号密码是否为空

首先要有一个onsubmit的DOM(提交)事件,和一个JavaScript弹出框:alert()警告框

<!--当form元素提交的时候,会触发onsubmit事件--> 

<form action="#"  onsubmit="return login()"> 

账号:<input type="text" name="name"> <br/>
密码:<input type="password" name="password" > <br/>
<input type="submit" value="登录"> </form>
<script>
function register(){
alert("注册成功【可变】");
}
</script> <br>
<button onclick="register()【函数名可变】">注册</button>

(利用javascript结合HTML DOM)

<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>

如果是CRUD业务中表单数据的提交(利用javascript结合JQuery)

<form method="post" id="addForm" action="#" enctype="multipart/form-data">
<table>
<tr>
<td>分类名称</td>
<td><input id="name" name="name" type="text" ></td>
</tr>
<tr>
<td>分类圖片</td>
<td><input id="categoryPic" accept="image/*" type="file" name="filepath" /></td>
</tr>
<tr>
<td colspan="2" ><button type="submit" >提 交</button></td>
</tr>
</table>
</form>

JQuery事件中,有个提交事件:submit() 用来提交form表单。

<script>
function checkEmpty(id, name){//预先定义判断输入框的函数checkEmpty()
var value = $("#"+id).val(); //拿到元素的值
if(value.length==0){//长度为0,代表输入为空
alert(name + "不能为空");
$("#"+id)[0].focus();//$("#"+id)[0]把Jquery对象转换成DOM对象,再调用事件foucs()
return false;
}
return true;
}
</script>
<script>
$(function(){ $("#addForm").submit(function(){//预先定义判断输入框的函数checkEmpty()
if(!checkEmpty("name【id名称可变】","分类名称【控件名可变】"))
return false;
if(!checkEmpty("categoryPic【id名称可变】","分类图片【控件名可变】"))
return false;
return true;
});
});
</script>

三、提交数据,验证长度

首先要有一个onsubmit的DOM(提交)事件,和一个JavaScript弹出框:alert()警告框

<!--当form元素提交的时候,会触发onsubmit事件-->
<form method="post" action="#" onsubmit="return register()"><br>
账号:<input id="name" type="text" name="name">
<input type="submit" value="注册">
</form>
<script>
function register(){
var name = document.getElementById("name");//拿到id="name"的标签元素
if(name.value.length<3){ //通过元素值的长度来验证长度大小
alert("用户名至少需要3位长度");
return false;
} return true; }
</script>

如果是CRUD业务中表单数据的提交(利用javascript结合JQuery)

<!--当form元素提交的时候,会触发submit监听事件-->
<form method="post" action="#" id="registerForm"><br>
账号:<input id="name" type="text" name="name">
<input type="submit" value="注册">
</form>
<script>
$(function(){ $("#registerForm【可变】").submit(function(){
var value=$("#name【可变】").val();
if(value.length<3【可变】){
alert("用户名至少需要3位长度【可变】");
return false;
}
return true;
});
}); </script>

四、提交数据,验证年龄是否为数字

首先要有一个onsubmit的DOM(提交)事件,和一个JavaScript弹出框:alert()警告框

<form   method="post"   action="#"   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="注册"> </form>
<script>
function register(){ var age = document.getElementById("age【id可变】");
if(age.value.length==0){//先判断年龄这个控件值是否为空
alert("年龄不能为空");
return false;
}
if(isNaN(age.value)){//不是数字返回true
alert("年龄必须是数字");
return false;
} return true; }
</script>

如果是CRUD业务中表单数据的提交(利用javascript结合JQuery)

<!--当form元素提交的时候,会触发submit监听事件-->

<form   method="post"   action="#"   id="registerForm">
账号:<input id="name" type="text" name="name"><br><br>
年龄:<input id="age" type="text" name="age"><br><br>
<input type="submit" value="注册">
</form>
<script>
function checkNumber(id, name){ //预先定义判断输入框的函数:判断是否为数字
var value = $("#"+id).val();
if(value.length==0){//先判断是否为空
alert(name+ "不能为空");
$("#"+id)[0].focus();
return false;
}
if(isNaN(value)){
alert(name+ "必须是数字");
$("#"+id)[0].focus();
return false;
} return true;
}
</script>
<script>
$(function(){
$("#registerForm").submit(function(){
if(!checkNumber("age","年龄"))
return false;
return true;
});
});
</script>

五、提交数据,验证年龄是否为整数

首先要有一个onsubmit的DOM(提交)事件,和一个JavaScript弹出框:alert()警告框

<form   method="post"   action="#"   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="注册"> </form>
<script>
function register(){ var age = document.getElementById("age");
if(parseInt(age.value)!=age.value){
alert("年龄必须是整数");
return false;
}
return true;
}
</script>

如果是CRUD业务中表单数据的提交(利用javascript结合JQuery)

<!--当form元素提交的时候,会触发submit监听事件-->

<form   method="post"   action="#"   id="registerForm">
账号:<input id="name" type="text" name="name"><br><br>
年龄:<input id="age" type="text" name="age"><br><br>
<input type="submit" value="注册">
</form>
<script>
function checkInt(id, name){
var value = $("#"+id).val();
if(value.length==0){
alert(name+ "不能为空");
$("#"+id)[0].focus();
return false;
}
if(parseInt(value)!=value){
alert(name+ "必须是整数");
$("#"+id)[0].focus();
return false;
} return true;
}
</script>
<script>
$(function{
$("#registerForm").submit(function{
if(!checkInt("age","年龄"))
return false;
return true;
});
});
</script>

六、提交数据,验证email格式是否正确

首先要有一个onsubmit的DOM(提交)事件,和一个JavaScript弹出框:alert()警告框

<form    method="post"    action="#"    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 t ype="submit" value="注册">
</form>
<script>
function register(){ var email = document.getElementById("email【id可变】"); 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>

如果是CRUD业务中表单数据的提交(利用javascript结合JQuery)

<!--当form元素提交的时候,会触发submit监听事件-->

<form   method="post"   action="#"   id="registerForm">
账号:<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="注册">
</form>
<script>
function checkEmail(id, name){
var value = $("#"+id).val();
if(value.length==0){
alert(name+ "不能为空");
$("#"+id)[0].focus();
return false;
}
var Regex = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;
if (!Regex.test(value)){
alert("email格式不正确");
return false;
} return true;
}
</script>
<script>
$(function(){
$("#registerForm").submit(function(){
if(!checkEmail("eamil","Email"))
return false;
return true;
});
});
</script>

七、隐藏和显示

<button onclick="hide()">隐藏div</button>
<button onclick="show()">显示div</button> <div id="d">这是一个div</div>

通过修改节点的style.display的值进行隐藏和显示

<script>
function hide(){
var d = document.getElementById("d");//拿到div对应的节点
d.style.display="none";
} function show(){
var d = document.getElementById("d");//拿到div对应的节点
d.style.display="block";
} </script>

(利用javascript结合JQuery)

<button id="b1">隐藏div</button>
<button id="b2">显示div</button> <div id="d">这是一个div</div>

在JQuery效果中,元素通过调用hide()和show()方法,可以达到隐藏和显示的效果。

$(function(){
var div = $("#d");//拿到div节点 $("#b1").click(function(){
div.hide();
});
$("#b2").click(function(){
div.show();
}); });