模板：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();
   });

});