?? 通用表單驗證函數 - fanqiang_com.htm
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0064)http://fanqiang.chinaunix.net/program/html/2005-06-28/3354.shtml -->
<HTML><HEAD><TITLE>通用表單驗證函數 - fanqiang.com</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>BODY {
FONT: 12pt 宋體
}
TH {
FONT: 12pt 宋體
}
INPUT {
FONT: 12pt 宋體
}
SELECT {
FONT: 12pt 宋體
}
TEXTAREA {
FONT: 12pt 宋體
}
SELECT {
FONT: 12pt 宋體
}
checkbox {
FONT: 12pt 宋體
}
A:link {
COLOR: #e6a306; TEXT-DECORATION: underline
}
A:visited {
COLOR: #e6a306; TEXT-DECORATION: underline
}
A:hover {
COLOR: #ffff00; TEXT-DECORATION: underline
}
BODY {
FONT-SIZE: 12pt; FONT-FAMILY: "宋體", "serif"
}
TD {
FONT-SIZE: 12pt; FONT-FAMILY: "宋體", "serif"
}
P {
FONT-SIZE: 9pt; LINE-HEIGHT: 150%
}
</STYLE>
<META content="MSHTML 6.00.2800.1505" name=GENERATOR></HEAD>
<BODY text=#ffffff bgColor=#000000 leftMargin=0
background="通用表單驗證函數 - fanqiang_com.files/bline.gif" topMargin=5
onload=setTailPosition() marginwidth="0" marginheight="5">
<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=750 border=0>
<TBODY>
<TR>
<TD height=45>
<P align=center><IMG alt="[ 永遠的UNIX::UNIX技術資料的寶庫 ]"
src="通用表單驗證函數 - fanqiang_com.files/title.gif"> </P></TD></TR>
<TR>
<TR>
<TD vAlign=bottom align=left height=40><SMALL><A
href="http://fanqiang.chinaunix.net/">首頁</A> > 編程技術 > <A
href="http://fanqiang.chinaunix.net/program/html/index.shtml">HTML/JS/XML</A>
> 正文</SMALL></TD></TR>
<TR>
<TD width="100%" bgColor=#d09f0d colSpan=5 height=2><IMG height=1
src="通用表單驗證函數 - fanqiang_com.files/c.gif" width=1></TD></TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width=750 border=0>
<TBODY>
<TR>
<TD vAlign=top align=middle><BR>
<TABLE cellSpacing=0 cellPadding=0 width="90%" align=center border=0>
<TBODY>
<TR>
<TH class=f24>
<H1>通用表單驗證函數</H1></TH></TR>
<TR>
<TD align=middle height=20><FONT color=#999999><SMALL>作者：lcsky
blog.itpub.net (2005-06-28 13:27:18)</SMALL></FONT></TD></TR>
<TR>
<TD><BR></TD></TR>
<TR>
<TD height=15></TD></TR>
<TR>
<TD class=l17><FONT class=f14 id=zoom><FONT color=#cccccc><!-- 正文begin -->
<P>不管是動態網站,還是其它B/S結構的系統,都離不開表單<BR>表單做為客戶端向服務器提交數據的載體擔當相當重要的角色.<BR>這就引出了一個問題,提交的數據合法嗎?擺在我們面前的問題就是驗證這些數據<BR>保證所提交的數據是合法的.所以,我們寫了一個大堆的驗證函數.當我們開始新的一個<BR>項目的開發時,我們又得寫一大堆的驗證函數,然后再調試這一大堆的函數...</P>
<P>本文將介紹一種方法來提高我的代碼的可重用性,提高我們的開發效率.</P>
<P>個人以為表單的驗證應該包含兩部分:<BR>第一,判斷用戶輸入的數據是否合法.<BR>第二,提示用戶你的數據為什么是不合法的.</P>
<P>所以,我們的通用表單驗證函數要實現的功能就是:<BR>第一,取得用戶輸入的數據GetValue(el)<BR>第二,驗證用戶的數據CheckForm(oForm)<BR>IE支持自定義屬性,這就是這個通用函數實現的基礎<BR>我們可以在表單元素上加入描述自身信息的屬性.有點像XML吧.<BR>check屬性:該屬性用于存儲數據合法性的正則表達式.<BR>warning屬性:該性性用于存儲出錯誤提示信息.<BR>第三,返回有誤的表單提示GoBack(el)<BR>這三個步驟的觸發事件是onsubmit,記住是return
CheckForm(this)<BR>搞錯了就全功盡棄了 :)<BR><form onsubmit="return
CheckForm(this)"></P>
<P>寫到這里,整體框架就出來了,通過取得表單元素的check屬性,取得字符串,構建正則表達式.再驗證其值.如果通過驗證就提交,如是數據不合法則取得表單元素的warning屬性,產生提示信息.并返回到該表單元素.整個的框架也比較簡單.<BR>我們要做的就是寫好正則表達式!</P>
<P>接下來我們來分析一下所有的表單元素<BR>按其共性,我們將它們分為三類<BR>每類表單的特點不一樣,我們的目標就是寫出通用的.</P>
<P>1.文輸入框Text<BR><input type="text" name="txt"><BR><input
type="password" name="pwd"><BR><input type="hidden"
name="hid"><BR><input type="file"
name="myfile"><BR><textarea
name="txts"></textarea><BR>2.單多選框Choose<BR><input
type="checkbox" name="c"><BR><input type="checkbox"
name="c"><BR><input type="radio" name="r"><BR><input
type="radio" name="r"><BR>3.單多下拉菜單Select<BR><select
name="sel"></select><BR><select name="sels"
multiple></select></P>
<P><BR>講了一堆"大道理"太抽象了,代碼更有說服力!</P>
<P>Check.js
JS函數文件<BR>////////////////////////////////////////////////////////////////////////////////<BR>/*<BR> *---------------
客戶端表單通用驗證CheckForm(oForm) -----------------<BR> *
功能:通用驗證所有的表單元素.<BR> * 使用:<BR> * <form
name="form1" onsubmit="return
CheckForm(this)"><BR> * <input
type="text" name="id" check="^S+$"
warning="id不能為空,且不能含有空格"><BR> * <input
type="submit"><BR> *
</form><BR> * author:wanghr100(灰豆寶寶.net)<BR> *
email:wanghr100@126.com<BR> * update:19:28 2004-8-23<BR> *
注意:寫正則表達式時一定要小心.不要讓"有心人"有空子鉆.<BR> * 已實現功能:<BR> *
對text,password,hidden,file,textarea,select,radio,checkbox進行合法性驗證<BR> *
待實現功能:把正則表式寫成個庫.<BR> *--------------- 客戶端表單通用驗證CheckForm(oForm)
-----------------<BR> */<BR>////////////////////////////////////////////////////////////////////////////////</P>
<P>//主函數<BR>function CheckForm(oForm)<BR>{<BR> var
els = oForm.elements;<BR>
//遍歷所有表元素<BR> for(var
i=0;i<els.length;i++)<BR>
{<BR>
//是否需要驗證<BR>
if(els[i].check)<BR>
{<BR>
//取得驗證的正則字符串<BR>
var sReg =
els[i].check;<BR>
//取得表單的值,用通用取值函數<BR>
var sVal =
GetValue(els[i]);<BR>
//字符串->正則表達式,不區分大小寫<BR>
var reg = new
RegExp(sReg,"i");<BR>
if(!reg.test(sVal))<BR>
{<BR>
//驗證不通過,彈出提示warning<BR>
alert(els[i].warning);<BR>
//該表單元素取得焦點,用通用返回函數<BR>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -