表單的驗證在實際的開發當中是件很煩瑣又無趣的事情，在網上偶爾一次無意中搜索“通用表單驗證函數”，搜索到“灰豆寶寶.net的專欄”一篇帖子：

       http://blog.csdn.net/wanghr100/archive/2004/08/23/82689.aspx

原文摘錄如下：

不管是動態網站,還是其它B/S結構的系統,都離不開表單,表單做為客戶端向服務器提交數據的載體擔當相當重要的角色.這就引出了一個問題,提交的數據合法嗎?擺在我們面前的問題就是驗證這些數據保證所提交的數據是合法的.所以,我們寫了一個大堆的驗證函數.當我們開始新的一個項目的開發時,我們又得寫一大堆的驗證函數,然后再調試這一大堆的函數...

　　本文將介紹一種方法來提高我的代碼的可重用性,提高我們的開發效率.

　　個人以為表單的驗證應該包含兩部分:
　　　　第一,判斷用戶輸入的數據是否合法.
　　　　第二,提示用戶你的數據為什么是不合法的.

　　所以,我們的通用表單驗證函數要實現的功能就是:
　　第一,取得用戶輸入的數據GetValue(el)
　　第二,驗證用戶的數據CheckForm(oForm)
　　IE支持自定義屬性,這就是這個通用函數實現的基礎
　　我們可以在表單元素上加入描述自身信息的屬性.有點像XML吧.
　　check屬性:該屬性用于存儲數據合法性的正則表達式.
　　warning屬性:該性性用于存儲出錯誤提示信息.
　　第三,返回有誤的表單提示GoBack(el)
　　這三個步驟的觸發事件是onsubmit,記住是return CheckForm(this)
　　搞錯了就全功盡棄了 :)
　　<form onsubmit="return CheckForm(this)">

　　寫到這里,整體框架就出來了,通過取得表單元素的check屬性,取得字符串,構建正則表達式.再驗證其值.如果通過驗證就提交,如是數據不合法則取得表單元素的warning屬性,產生提示信息.并返回到該表單元素.整個的框架也比較簡單.
　　我們要做的就是寫好正則表達式!

　　接下來我們來分析一下所有的表單元素
　　按其共性,我們將它們分為三類
　　每類表單的特點不一樣,我們的目標就是寫出通用的.

　　1.文輸入框Text
　　<input type="text" name="txt">
　　<input type="password" name="pwd">
　　<input type="hidden" name="hid">
　　<input type="file" name="myfile">
　　<textarea name="txts"></textarea>
　　2.單多選框Choose
　　<input type="checkbox" name="c">
　　<input type="checkbox" name="c">
　　<input type="radio" name="r">
　　<input type="radio" name="r">
　　3.單多下拉菜單Select
　　<select name="sel"></select>
　　<select name="sels" multiple></select>

demo.htm 演示文件
　　<script language="JavaScript" src="Check.js"></script>
　　通用表單函數測試:
　　<form name="form1" onsubmit="return CheckForm(this)">
　　test:<input type="text" name="test">不驗證<br>
　　賬號:<input type="text" check="^\S+$" warning="賬號不能為空,且不能含有空格" name="id">不能為空<br>
　　密碼:<input type="password" check="\S{6,}" warning="密碼六位以上" name="id">六位以上<br>
　　電話:<input type="text" check="^\d+$" warning="電話號碼含有非法字符" name="number" value=""><br>
　　相片上傳:<input type="file" check="(.*)(\.jpg|\.bmp)$" warning="相片應該為JPG,BMP格式的" name="pic" value="1"><br>
　　出生日期:<input type="text" check="^\d{4}\-\d{1,2}-\d{1,2}$" warning="日期格式2004-08-10" name="dt" value="">日期格式2004-08-10<br>
　　省份:
　　<select name="sel" check="^0$" warning="請選擇所在省份">
　　<option value="">請選擇
　　<option value="1">福建省
　　<option value="2">湖北省
　　</select>
　　<br>
　　選擇你喜歡的運動:<br>
　　游泳<input type="checkbox" name="c" check="^0{2,}$" warning="請選擇2項或以上">
　　籃球<input type="checkbox" name="c">
　　足球<input type="checkbox" name="c">
　　排球<input type="checkbox" name="c">
　　<br>
　　你的學歷:
　　大學<input type="radio" name="r" check="^0$" warning="請選擇一項學歷">
　　中學<input type="radio" name="r">
　　小學<input type="radio" name="r">
　　<br>
　　個人介紹:
　　<textarea name="txts" check="^[\s|\S]{20,}$" warning="個人介紹不能為空,且不少于20字"></textarea>20個字以上
　　<input type="submit">
　　</form>

轉自：伊圖教程網[www.etoow.com]

       原作者已做了大量的基礎工作，提供了js文件下載（真是好人！），只是有幾點不足之處：

1、  頁面的驗證check，只能輸入實際的正則表達式。而正則表達式不是一件容易記      憶的東東。

2、  有些驗證的規則，是單純的正則表達式所不能搞定的，需要引入普通的驗證function。

3、  對輸入項，有時一個驗證規則難以滿足需要，需要多個規則疊加。

4、  warning太繁，顯得羅嗦。

5、  只適用檢查整個form的所有屬性驗證，未提供針對某一個屬性進行驗證。

6、  沒有“是否必填”的屬性。

針對以上，做了如下改進：

1、  在JS文件中就某些通用規則設定公共驗證函數（提供的驗證規則函數在后文中列出），在表單中只需給check設定相應的驗證類型，通過使用eval()動態執行函數。

2、  在JS文件中規則函數的設定，有兩種方式,說明如下：

a、  正則表達式的驗證方式，返回數組rt，rt[0]為對應的正則表達式，rt[1]為對應要警告的語句.

b、  普通的判斷function，返回false或true，函數體中通過this.value和this.showName獲取頁面數據，自行判定value的合法性.

3、  可給check設置多個規則，各個規則之間使用";"隔開，如"不能含有空格，且字數不能超過10",設置"notBlank;isString('#',10)".

4、  頁面中，簡單設置showName屬性值即可。

5、  提供checkElement(id,func)函數，檢查某個元素是否匹配。

6、  提供“required”的屬性設置。

IE(別的瀏覽器呢?)支持自定義屬性，設定required/showName/check三個屬性，當設定這些屬性，對象必需有對應的name屬性：

屬性名	是否必填	說明
required	否	“true”或者“yes”為必填寫
showName	否	要顯示的對象描述 建議設置，方便對用戶提示
check	否	驗證的規則函數設定： 1、對于不帶參數的規則，可直接設置規則名，如notBlank或者notBlank(). 2、對于帶參數的規則，需要設置對應的規則參數，如isDate('YYYY-MM-DD'). 3、對于本JS文件未提供的類型判定，可自行設置正則表達式驗證，如驗證三到五位的字符，設置reg('^\\S{3,5}$') . 4、可給check設置多個規則，各個規則之間使用";"隔開，如"不能含有空格，且字數不能超過10",設置"notBlank;isString('#',10)".

JS文件的函數說明如下：

一、工具function

函數	輸入參數	返回值	說明
CheckForm	oForm： 頁面FORM	boolean	form驗證的主函數
validate	ele： form中某個元素	boolean	CheckForm的輔助函數，不要直接調用
GetValue	ele： form中某個元素	string	通用的獲取某個element的值
GoBack	ele： form中某個元素	void	焦點定位
executeFunc	name： 函數名 字符串	string	使用eval()動態執行函數
trim	value	string	使用正則表達式，去除首尾空格
regValidate	value： 要驗證值 sReg： 正則表達式	boolean	判定某個值與正則表達式是否相符
checkValue	value：要驗證值 func： 規則函數	boolean	判定某個數值與某個驗證函數是否相符 驗證函數的寫法同上文check屬性
checkElement	id：   元素的ID func： 規則函數 showName： 要alert的顯示名，如不設，不alert	boolean	檢查某個元素與某個驗證函數是否相符,需要傳入元素的ID
checkSelectByName	name： 元素name num： 至少選擇的個數 showName： 要alert的顯示名，如不設，不alert	boolean	檢查某個對象(checkbox/select-multiple)至少選擇個數,需要傳入元素的NAME
elementValue	id：元素ID	string	獲取某元素的值
log	v：調試信息	void	一個javascript調試工具: log4js 調用log函數后，按F1就能看到效果了 (呵呵，這個是從網上看到的，不記得出處了，象原作者表示感謝)

二、規則驗證函數

              函數有兩大類，一類是正則表達式(A)，一類是普通的javascript驗證函數(B)。
      給出了一些常用的規則函數驗證，需要根據實際不斷增加.

函數	類型	輸入參數	返回值	說明
reg	A	sReg 正則表達式字符串	數組rt，rt[0]為對應的正則表達式，rt[1]為對應要警告的語句   A類的返回值	匹配自行定義的正則表達式
notBlank	A			不能為空,且不能含有空格
required	A			必需填寫，不能為空
isDate	A	fmt 格式 yyyy-mm-dd yyyy/mm/dd yyyy.mm.dd yyyymmdd		日期格式判斷 只使用正則表達式匹配格式 待完善：月份和日期是否合理
isString	A	min 個數最小值 max 個數最大值   ‘#’ 表示任意		字符串判定 有如下幾種設定方式： isString         任意字符串 isString(‘#’, ‘#’)  任意字符串 isString(4)       4位字符串 isString(4,8)    4到8位字符 isString(‘#’,4)  最多4位字符 isString(4, ‘#’)  最少4位字符
strStartsWith	B	str 開頭的字符	如否，返回false 否則，返回true或者void   B類的返回值	字符串是否以“str”開頭
isContains	B	str 包含的字符		字符串是否包含“str”
strEndsWith	B	str 結束的字符		字符串是否以“str”結束
isEmail	A			是否E-AMIL
onlyZh	A			只包含中文
onlyEn	A			只包含英文
enOrNum	A			只包含英文和數字
isInt	A	type 整數的類型 為空 任意整數 '0+'  非負整數 '+'    正整數 '-0'   非正整數 '-'    負整數		整數的判定 如isInt(‘0+’)，只能是非負整數
isFloat	A	type浮點數的類型 為空 任意浮點數 '0+'  非負浮點數 '+'    正浮點數 '-0'   非正浮點數 '-'    負浮點數		浮點數的判定 如isFloat(‘0+’)，只能是非負浮點數
setNumber	B	min最小值 max最大值 ‘#’ 表示任意		數字大小判定 有如下幾種設定方式： setNumber        任意數字 setNumber(‘#’, ‘#’) 任意數字 setNumber(4)    必需是4 setNumber(4,8)   4到8之間 setNumber(‘#’,4)  不大于4 setNumber(4, ‘#’)  不小于4
isPhone	A			電話號碼判定
isMobile	A			手機號碼判定
isUrl	A			URL判定 必須以http(s)://開頭
isZip	A			郵政編碼
select	A	num 必需選擇的最少個數		目標是否要選擇 用于select-multiple/checkbox
。。。。。TODO 自行根據業務需要添加

如何使用呢?

       前提是引入Check.js文件: <script language="JavaScript" src="Check.js"></script>

一、驗證整個form

       <form name="form1" onsubmit="CheckForm(this)">

<input type="text" name="user" id="user" check="strStartsWith('hello')" required="true" showName="用戶">

</form>

二、單獨驗證某個元素的合法性

       <script>

                 //user為對象id

if(!checkElement("user","isString(6,10)")){

       alert("非法用戶帳號，6到10位數！");

}

</script>

三、特殊的用法，檢驗checkbox和select-multiple至少要選擇的項數

       <script>

                 //userId為對象name

if(!checkSelectByName ("userId",1)){

       alert("至少要選擇一個用戶！");

}

</script>


隨文JS和HTML測試代碼：下載