表單的驗(yàn)證在實(shí)際的開(kāi)發(fā)當(dāng)中是件很煩瑣又無(wú)趣的事情，在網(wǎng)上偶爾一次無(wú)意中搜索“通用表單驗(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),都離不開(kāi)表單,表單做為客戶端向服務(wù)器提交數(shù)據(jù)的載體擔(dān)當(dāng)相當(dāng)重要的角色.這就引出了一個(gè)問(wèn)題,提交的數(shù)據(jù)合法嗎?擺在我們面前的問(wèn)題就是驗(yàn)證這些數(shù)據(jù)保證所提交的數(shù)據(jù)是合法的.所以,我們寫(xiě)了一個(gè)大堆的驗(yàn)證函數(shù).當(dāng)我們開(kāi)始新的一個(gè)項(xiàng)目的開(kāi)發(fā)時(shí),我們又得寫(xiě)一大堆的驗(yàn)證函數(shù),然后再調(diào)試這一大堆的函數(shù)...
本文將介紹一種方法來(lái)提高我的代碼的可重用性,提高我們的開(kāi)發(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)">
寫(xiě)到這里,整體框架就出來(lái)了,通過(guò)取得表單元素的check屬性,取得字符串,構(gòu)建正則表達(dá)式.再驗(yàn)證其值.如果通過(guò)驗(yàn)證就提交,如是數(shù)據(jù)不合法則取得表單元素的warning屬性,產(chǎn)生提示信息.并返回到該表單元素.整個(gè)的框架也比較簡(jiǎn)單.
我們要做的就是寫(xiě)好正則表達(dá)式!
接下來(lái)我們來(lái)分析一下所有的表單元素
按其共性,我們將它們分為三類
每類表單的特點(diǎn)不一樣,我們的目標(biāo)就是寫(xiě)出通用的.
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è)面的驗(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、 沒(méi)有“是否必填”的屬性。
針對(duì)以上，做了如下改進(jìn)：
1、 在JS文件中就某些通用規(guī)則設(shè)定公共驗(yàn)證函數(shù)（提供的驗(yàn)證規(guī)則函數(shù)在后文中列出），在表單中只需給check設(shè)定相應(yīng)的驗(yàn)證類型，通過(guò)使用eval()動(dòng)態(tài)執(zhí)行函數(shù)。
2、 在JS文件中規(guī)則函數(shù)的設(shè)定，有兩種方式,說(shuō)明如下：
a、 正則表達(dá)式的驗(yàn)證方式，返回?cái)?shù)組rt，rt[0]為對(duì)應(yīng)的正則表達(dá)式，rt[1]為對(duì)應(yīng)要警告的語(yǔ)句.
b、 普通的判斷function，返回false或true，函數(shù)體中通過(guò)this.value和this.showName獲取頁(yè)面數(shù)據(jù)，自行判定value的合法性.
3、 可給check設(shè)置多個(gè)規(guī)則，各個(gè)規(guī)則之間使用";"隔開(kāi)，如"不能含有空格，且字?jǐn)?shù)不能超過(guò)10",設(shè)置"notBlank;isString('#',10)".
4、 頁(yè)面中，簡(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屬性：
|
屬性名 |
是否必填 |
說(shuō)明 |
|
required |
否 |
“true”或者“yes”為必填寫(xiě) |
|
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ī)則之間使用";"隔開(kāi)，如"不能含有空格，且字?jǐn)?shù)不能超過(guò)10",設(shè)置"notBlank;isString('#',10)". |
JS文件的函數(shù)說(shuō)明如下：
一、工具function
|
函數(shù) |
輸入?yún)?shù) |
返回值 |
說(shuō)明 |
|
CheckForm |
oForm： 頁(yè)面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ù)的寫(xiě)法同上文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ù) |
返回值 |
說(shuō)明 |
|
reg |
A |
sReg 正則表達(dá)式字符串 |
數(shù)組rt，rt[0]為對(duì)應(yīng)的正則表達(dá)式，rt[1]為對(duì)應(yīng)要警告的語(yǔ)句
A類的返回值
|
匹配自行定義的正則表達(dá)式
|
|
notBlank |
A |
|
|
不能為空,且不能含有空格 |
|
required |
A |
|
|
必需填寫(xiě)，不能為空 |
|
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 開(kāi)頭的字符 |
如否，返回false
否則，返回true或者void
B類的返回值 |
字符串是否以“str”開(kāi)頭 |
|
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)://開(kāi)頭 |
|
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è)試代碼：下載