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

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

原文摘錄如下：

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

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

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

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

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

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

　　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ù)測(cè)試:
　　<form name="form1" onsubmit="return CheckForm(this)">
　　test:<input type="text" name="test">不驗(yàn)證<br>
　　賬號(hào):<input type="text" check="^\S+$" warning="賬號(hào)不能為空,且不能含有空格" name="id">不能為空<br>
　　密碼:<input type="password" check="\S{6,}" warning="密碼六位以上" name="id">六位以上<br>
　　電話:<input type="text" check="^\d+$" warning="電話號(hào)碼含有非法字符" 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="請(qǐng)選擇所在省份">
　　<option value="">請(qǐng)選擇
　　<option value="1">福建省
　　<option value="2">湖北省
　　</select>
　　<br>
　　選擇你喜歡的運(yùn)動(dòng):<br>
　　游泳<input type="checkbox" name="c" check="^0{2,}$" warning="請(qǐng)選擇2項(xiàng)或以上">
　　籃球<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="請(qǐng)選擇一項(xiàng)學(xué)歷">
　　中學(xué)<input type="radio" name="r">
　　小學(xué)<input type="radio" name="r">
　　<br>
　　個(gè)人介紹:
　　<textarea name="txts" check="^[\s|\S]{20,}$" warning="個(gè)人介紹不能為空,且不少于20字"></textarea>20個(gè)字以上
　　<input type="submit">
　　</form>

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

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

1、  頁面的驗(yàn)證check，只能輸入實(shí)際的正則表達(dá)式。而正則表達(dá)式不是一件容易記      憶的東東。

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

3、  對(duì)輸入項(xiàng)，有時(shí)一個(gè)驗(yàn)證規(guī)則難以滿足需要，需要多個(gè)規(guī)則疊加。

4、  warning太繁，顯得羅嗦。

5、  只適用檢查整個(gè)form的所有屬性驗(yàn)證，未提供針對(duì)某一個(gè)屬性進(jìn)行驗(yàn)證。

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

針對(duì)以上，做了如下改進(jìn)：

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

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

a、  正則表達(dá)式的驗(yàn)證方式，返回?cái)?shù)組rt，rt[0]為對(duì)應(yīng)的正則表達(dá)式，rt[1]為對(duì)應(yīng)要警告的語句.

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

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

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

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

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

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

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

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

一、工具function

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

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

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

函數(shù)	類型	輸入?yún)?shù)	返回值	說明
reg	A	sReg 正則表達(dá)式字符串	數(shù)組rt，rt[0]為對(duì)應(yīng)的正則表達(dá)式，rt[1]為對(duì)應(yīng)要警告的語句   A類的返回值	匹配自行定義的正則表達(dá)式
notBlank	A			不能為空,且不能含有空格
required	A			必需填寫，不能為空
isDate	A	fmt 格式 yyyy-mm-dd yyyy/mm/dd yyyy.mm.dd yyyymmdd		日期格式判斷 只使用正則表達(dá)式匹配格式 待完善：月份和日期是否合理
isString	A	min 個(gè)數(shù)最小值 max 個(gè)數(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+'  非負(fù)整數(shù) '+'    正整數(shù) '-0'   非正整數(shù) '-'    負(fù)整數(shù)		整數(shù)的判定 如isInt(‘0+’)，只能是非負(fù)整數(shù)
isFloat	A	type浮點(diǎn)數(shù)的類型 為空 任意浮點(diǎn)數(shù) '0+'  非負(fù)浮點(diǎn)數(shù) '+'    正浮點(diǎn)數(shù) '-0'   非正浮點(diǎn)數(shù) '-'    負(fù)浮點(diǎn)數(shù)		浮點(diǎn)數(shù)的判定 如isFloat(‘0+’)，只能是非負(fù)浮點(diǎn)數(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			電話號(hào)碼判定
isMobile	A			手機(jī)號(hào)碼判定
isUrl	A			URL判定 必須以http(s)://開頭
isZip	A			郵政編碼
select	A	num 必需選擇的最少個(gè)數(shù)		目標(biāo)是否要選擇 用于select-multiple/checkbox
。。。。。TODO 自行根據(jù)業(yè)務(wù)需要添加

如何使用呢?

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

一、驗(yàn)證整個(gè)form

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

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

</form>

二、單獨(dú)驗(yàn)證某個(gè)元素的合法性

       <script>

                 //user為對(duì)象id

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

       alert("非法用戶帳號(hào)，6到10位數(shù)！");

}

</script>

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

       <script>

                 //userId為對(duì)象name

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

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

}

</script>


隨文JS和HTML測(cè)試代碼：下載