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

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

原文摘錄如下：

不管是動態(tài)網(wǎng)站,還是其它B/S結(jié)構(gòu)的系統(tǒng),都離不開表單,表單做為客戶端向服務(wù)器提交數(shù)據(jù)的載體擔(dān)當(dāng)相當(dāng)重要的角色.這就引出了一個問題,提交的數(shù)據(jù)合法嗎?擺在我們面前的問題就是驗證這些數(shù)據(jù)保證所提交的數(shù)據(jù)是合法的.所以,我們寫了一個大堆的驗證函數(shù).當(dāng)我們開始新的一個項目的開發(fā)時,我們又得寫一大堆的驗證函數(shù),然后再調(diào)試這一大堆的函數(shù)...

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

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

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

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

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

　　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>
　　通用表單函數(shù)測試:
　　<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="相片應(yīng)該為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>
　　你的學(xué)歷:
　　大學(xué)<input type="radio" name="r" check="^0$" warning="請選擇一項學(xué)歷">
　　中學(xué)<input type="radio" name="r">
　　小學(xué)<input type="radio" name="r">
　　<br>
　　個人介紹:
　　<textarea name="txts" check="^[\s|\S]{20,}$" warning="個人介紹不能為空,且不少于20字"></textarea>20個字以上
　　<input type="submit">
　　</form>

轉(zhuǎn)自：伊圖教程網(wǎng)[www.etoow.com]

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

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

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

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

4、  warning太繁，顯得羅嗦。

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

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

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

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

2、  在JS文件中規(guī)則函數(shù)的設(shè)定，有兩種方式,說明如下：

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

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

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

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

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

6、  提供“required”的屬性設(shè)置。

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

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

JS文件的函數(shù)說明如下：

一、工具function

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

二、規(guī)則驗證函數(shù)

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

函數(shù)	類型	輸入?yún)?shù)	返回值	說明
reg	A	sReg 正則表達式字符串	數(shù)組rt，rt[0]為對應(yīng)的正則表達式，rt[1]為對應(yīng)要警告的語句   A類的返回值	匹配自行定義的正則表達式
notBlank	A			不能為空,且不能含有空格
required	A			必需填寫，不能為空
isDate	A	fmt 格式 yyyy-mm-dd yyyy/mm/dd yyyy.mm.dd yyyymmdd		日期格式判斷 只使用正則表達式匹配格式 待完善：月份和日期是否合理
isString	A	min 個數(shù)最小值 max 個數(shù)最大值   ‘#’ 表示任意		字符串判定 有如下幾種設(shè)定方式： 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 結(jié)束的字符		字符串是否以“str”結(jié)束
isEmail	A			是否E-AMIL
onlyZh	A			只包含中文
onlyEn	A			只包含英文
enOrNum	A			只包含英文和數(shù)字
isInt	A	type 整數(shù)的類型 為空 任意整數(shù) '0+'  非負整數(shù) '+'    正整數(shù) '-0'   非正整數(shù) '-'    負整數(shù)		整數(shù)的判定 如isInt(‘0+’)，只能是非負整數(shù)
isFloat	A	type浮點數(shù)的類型 為空 任意浮點數(shù) '0+'  非負浮點數(shù) '+'    正浮點數(shù) '-0'   非正浮點數(shù) '-'    負浮點數(shù)		浮點數(shù)的判定 如isFloat(‘0+’)，只能是非負浮點數(shù)
setNumber	B	min最小值 max最大值 ‘#’ 表示任意		數(shù)字大小判定 有如下幾種設(shè)定方式： setNumber        任意數(shù)字 setNumber(‘#’, ‘#’) 任意數(shù)字 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 必需選擇的最少個數(shù)		目標是否要選擇 用于select-multiple/checkbox
。。。。。TODO 自行根據(jù)業(yè)務(wù)需要添加

如何使用呢?

       前提是引入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位數(shù)！");

}

</script>

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

       <script>

                 //userId為對象name

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

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

}

</script>


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