在用戶填寫表單的過程之中，往往需要編寫一堆的驗證操作，這樣就可以保證提交的數據時正確的。那么下面就模擬表單驗證的處理操作完成。
如果要想進行驗證，首先針對於輸入的數據來進行一個驗證處理。
1、定義一個基礎的表單（從標准來講每一個元素都一定要存在有一個ID屬性）
<form action="pass.html" method="post" id="loginForm">
<!--在以后的開發過程之中，必須要保證id與name屬性內容完全一致，否則會出現怪異問題-->
登錄郵箱：<input type="text" name="email" id="email"></input><br>
<button type="submit" id="subBtn">登錄</button>
</form>
范例：
pass.html
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content=event.html""> <meta name="keywords" content="event,html,js"> <body> <h1>表單驗證通過！</h1> </body> </html>
form.html
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content=event.html""> <meta name="keywords" content="event,html,js"> <title>javascript的程序開發之表單提交事件處理</title> <script type="text/javascript" src="form.js"></script> </head> <body> <form action="pass.html" method="post" id="loginForm"> <!--在以后的開發過程之中，必須要保證id與name屬性內容完全一致，否則會出現怪異問題--> 登錄郵箱：<input type="text" name="email" id="email"></input><br> <button type="submit" id="subBtn">登錄</button> </form> </body> </html>
加載頁面時：
點擊登錄時：
2、隨后就需要對於表單的數據進行驗證。這個過程應該在form.js文件里完成。
*現在習慣性的做法是直接找到登錄按鈕進行驗證
范例：
form.html
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content=event.html""> <meta name="keywords" content="event,html,js"> <title>javascript的程序開發之表單提交事件處理</title> <script type="text/javascript" src="form.js"></script> </head> <body> <form action="pass.html" method="post" id="loginForm"> <!--在以后的開發過程之中，必須要保證id與name屬性內容完全一致，否則會出現怪異問題--> 登錄郵箱：<input type="text" name="email" id="email"></input><br> <button type="submit" id="subBtn">登錄</button> </form> </body> </html>
form.js
window.onload = function(){ //在頁面加載之后動態事件綁定 //找到按鈕元素對象並增加一個提交表單事件 document.getElementById('subBtn').addEventListener("submit",function(){ //找到郵件元素對象 var emailObj = document.getElementById("email"); //取出它的值 alert(emailObj.value); if (emailObj.value == "") { alert("您還有輸入登錄郵箱，無法登錄！"); }else{ this.submit(); //當前元素提交表單 } },false); }
內容為空時：
內容不為空時：
發現：不管內容是否為空，只要點擊了確定，表單就通過了，然而，這是不對的：
3、以上的代碼只是說可以取得了最簡單的驗證處理，但是返現表單是不能夠進行有效的攔截的，應為如果要想攔截表單，需要的是onsubmit事件,這個事件的特點是如果返回了false，那么就不提交表單，如果返回的是true，表示的是提交表單。
function f () {
return false;
}
<form action="pass.html" method="post" id="loginForm" onsubmit="return f()">
<!--在以后的開發過程之中，必須要保證id與name屬性內容完全一致，否則會出現怪異問題-->
登錄郵箱：<input type="text" name="email" id="email"></input><br>
<button type="submit" id="subBtn">登錄</button>
</form>
此時<form>元素中的onsubmit="return f()”表示將接收f()函數返回的結果，如果此函數返回的是true，表單正常提交，反之，表單不提交。但是這個代碼不能夠使用。
因為這種操作屬於靜態的事件綁定處理，不能夠用靜態，只能通過動態事件綁定處理，在動態事件的驗證中，如果要想控制表單的提交，在表單上設置submit事件，而后利用“表單對象.submit()”函數手工提交表單。也即將提交表單的操作交給from，而不是由button去控制。
范例：
form.html
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content=event.html""> <meta name="keywords" content="event,html,js"> <title>javascript的程序開發之表單提交事件處理</title> <script type="text/javascript" src="form.js"></script> </head> <body> <form action="pass.html" method="post" id="loginForm" onsubmit="return f()"> <!--在以后的開發過程之中，必須要保證id與name屬性內容完全一致，否則會出現怪異問題--> 登錄郵箱：<input type="text" name="email" id="email"></input><br> <button type="submit" id="subBtn">登錄</button> </form> </body> </html>
form.js
window.onload = function(){ //在頁面加載之后動態事件綁定 //找到表單元素對象並增加一個提交表單事件 document.getElementById('loginForm').addEventListener("submit",function(){ //找到郵件元素對象 var emailObj = document.getElementById("email"); //取出它的值 // alert(emailObj.value); if (emailObj.value == "") { alert("您還有輸入登錄郵箱，無法登錄！"); }else{ //輸入正確，理論上應該可以進行提交 alert(emailObj.value); this.submit(); //當前元素提交表單 } },false); } function f () { return false; }
內容為空時：
內容不為空時：
發現：內容必須存在，點擊確定，表單才會通過，這才是正確的邏輯：
但是這個驗證並不標准，因為此時輸入的是email數據嗎？不能用簡單的空字符串來描述，而應該用正則表達式來計算，那么在JavaScript中正則應用語法：”/^正則標記$/.test(數據)“。
范例：
form.js
window.onload = function(){ //在頁面加載之后動態事件綁定 //找到表單元素對象並增加一個提交表單事件 document.getElementById('loginForm').addEventListener("submit",function(){ //找到郵件元素對象 var emailObj = document.getElementById("email"); //取出它的值 // alert(emailObj.value); if (emailObj.value == "") { alert("您還有輸入登錄郵箱，無法登錄！"); }else{ //輸入正確，理論上應該可以進行提交 alert(emailObj.value); if (/^\w+@\w+\.\w+$/.test(emailObj.value)) { this.submit(); //當前元素提交表單 }else{ //驗證不通過 alert("請輸入合法的EMAIL地址!"); } } },false); } function f () { return false; }
內容為空時：
內容不為空時,但不是郵箱格式時：
內容不為空時，是郵箱格式時：
發現：內容必須存在，而且郵箱格式必須正確，點擊確定，表單才會通過：
在整個的submit事件處理中，有一點是非常麻煩的，如果直接在”<form>“元素上使用”onsubmit“事件處理，那么只需要利用”return true|false返回的函數“，那么就可以攔截操作。可是如果是動態事件綁定，那么將無法攔截。
對於”addEventListener(事件類型，事件處理函數，冒泡處理)函數“，如果按照這樣的思路，要去解決當前的攔截問題，那么就必須阻止事件向下進行。
准確的完整代碼范例：
pass.html
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content=event.html""> <meta name="keywords" content="event,html,js"> <body> <h1>表單驗證通過！</h1> </body> </html>
form.html
<!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="description" content=event.html""> <meta name="keywords" content="event,html,js"> <title>javascript的程序開發之表單提交事件處理</title> <script type="text/javascript" src="form.js"></script> </head> <body> <form action="pass.html" method="post" id="loginForm"> <!--在以后的開發過程之中，必須要保證id與name屬性內容完全一致，否則會出現怪異問題--> 登錄郵箱：<input type="text" name="email" id="email"></input><br> <button type="submit" id="subBtn">登錄</button> </form> </body> </html>
form.js
window.onload = function(){ //在頁面加載之后動態事件綁定 //找到表單元素對象並增加一個提交表單事件 document.getElementById('loginForm').addEventListener("submit",function(e){ //e是提交事件 console.log(e); //控制台可以打印出當前執行的事件 //找到郵件元素對象 var emailObj = document.getElementById("email"); //取出它的值 // alert(emailObj.value); if (emailObj.value == "") { alert("您還有輸入登錄郵箱，無法登錄！"); if (e && e.preventDefault) { //現在是在W3C標准下執行 e.preventDefault(); //阻止瀏覽器的動作 }else{ //專門針對於IE瀏覽器的處理 window.event.returnValue= false; } }else{ //輸入正確，理論上應該可以進行提交 alert(emailObj.value); if (/^\w+@\w+\.\w+$/.test(emailObj.value)) { this.submit(); //當前元素提交表單 }else{ //驗證不通過 alert("請輸入合法的EMAIL地址!"); if (e && e.preventDefault) { //現在是在W3C標准下執行 e.preventDefault(); //阻止瀏覽器的動作 }else{ //專門針對於IE瀏覽器的處理 window.event.returnValue= false; } } } },false); } function submit () { return false; }
這種對提交表單的驗證方式算是比較完善的了，而且對瀏覽器進行了兼容，不過這種代碼沒有通用性。