在使用者填寫表單的過程之中，往往需要編寫一堆的驗證操作，這樣就可以保證送出的資料時正确的。那麼下面就模拟表單驗證的處理操作完成。
如果要想進行驗證，首先針對于輸入的資料來進行一個驗證處理。
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
form.html
加載頁面時：
點選登入時：
2、随後就需要對于表單的資料進行驗證。這個過程應該在form.js檔案裡完成。
*現在習慣性的做法是直接找到登入按鈕進行驗證
form.js
内容為空時：
内容不為空時：
發現：不管内容是否為空，隻要點選了确定，表單就通過了，然而，這是不對的：
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.js
内容為空時：
發現：内容必須存在，點選确定，表單才會通過，這才是正确的邏輯：
但是這個驗證并不标準，因為此時輸入的是email資料嗎？不能用簡單的空字元串來描述，而應該用正規表達式來計算，那麼在JavaScript中正則應用文法：”/^正則标記$/.test(資料)“。
内容不為空時,但不是郵箱格式時：
内容不為空時，是郵箱格式時：
發現：内容必須存在，而且郵箱格式必須正确，點選确定，表單才會通過：
在整個的submit事件進行中，有一點是非常麻煩的，如果直接在”<form>“元素上使用”onsubmit“事件處理，那麼隻需要利用”return true|false傳回的函數“，那麼就可以攔截操作。可是如果是動态事件綁定，那麼将無法攔截。
對于”addEventListener(事件類型，事件處理函數，冒泡處理)函數“，如果按照這樣的思路，要去解決目前的攔截問題，那麼就必須阻止事件向下進行。
準确的完整代碼範例：
這種對送出表單的驗證方式算是比較完善的了，而且對浏覽器進行了相容，不過這種代碼沒有通用性。
程式猿神奇的手，每時每刻，這雙手都在改變着世界的互動方式！
本文轉自當天真遇到現實部落格園部落格，原文連結：http://www.cnblogs.com/XYQ-208910/p/5826942.html，如需轉載請自行聯系原作者