模板：DOM常用场景【表单提交】——javascript结合HTML DOM（或者JQuery）运用
一、删除行为前的提示
首先要有一个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(); }); });
