綜合案例：表單驗證
開發要求：
要求定義一個雇員資訊的增加頁面，例如頁面名稱為"emp_add.htmnl",而後在此頁面中要提供有輸入表單，此表單定義要求如下:
.雇員編号：必須是4位數字，按照正則進行驗證；
.雇員姓名：不能為空；
.雇員職位：不能為空；
.雇員日期：按照"yyyy-mm-dd"的格式編寫，按照正則進行驗證；
.基本工資：按照小數編寫，小數為最多2位，按照正則進行驗證；
.傭金：難找小數編寫，小數位數最多2位，按照正則進行驗證。
具體步驟：
第一：定義表單
.将form.css檔案拷貝到css目錄之中；
.将emp_add.html頁面之中編寫表單，以及導入form.css檔案的引用；
第二：頁面動态效果
1、為表格增加一些顯示的過渡效果
.可以建立一個工具類檔案util.js，難麼在檔案中提供有表格改變的處理函數；
.既然現在是在emp_add.html檔案進行處理，是以應該準備js/emp_add.js檔案；
.在emp_add.html檔案中導入uitl.js與emp_add.js檔案;
.動态設定顯示的效果，增加mouseover和mouseout事件，在表格行元素中增加。
2、考慮到代碼的可重用性問題，是以建議将具體的驗證交給util.js來完成。
.建立validateEmpty()、validateRegex()、validateNumber()、validateDate()；
.建立完一個函數之後一定要對這個函數的可用性進行測試；
.在emp_add.js檔案裡面動态綁定事件，使用的還是“onblur”事件;
3、分别綁定完事件處理之後，下面針對于表單進行事件的處理。
第三：使用日期選擇元件
對于日期的控制需要注意一個問題：正則隻能夠針對于日期的格式進行判斷，但是無法對内容進行驗證，而且日期這一操作，不應該讓使用者随意輸入，最好的一個做法是由使用者自己選擇，也即使用日期元件直接選取日期，這個可以直接去網上下載下傳将代碼拷貝過來即可使用。
具體代碼如下：
emp_add.html
form.css
emp_add.js
util.js
效果圖如下：
預設時：
資訊全為空時，驗證不通過：
資訊任意一個為空時，驗證不通過：
資訊都不為空且符合格式時，驗證全通過：
選取日期時：
完整代碼下載下傳：
程式猿神奇的手，每時每刻，這雙手都在改變着世界的互動方式！
本文轉自當天真遇到現實部落格園部落格，原文連結：http://www.cnblogs.com/XYQ-208910/p/5840007.html，如需轉載請自行聯系原作者