Check.js   JS函式檔案
////////////////////////////////////////////////////////////////////////////////
/*
 *--------------- 客戶端表單通用驗證CheckForm(oForm) -----------------
 * 功能:通用驗證所有的表單元素.
 * 使用:
 *    <form name="form1" onsubmit="return CheckForm(this)">
 *    <input type="text" name="id" check="^/S+$" warning="id不能為空,且不能含有空格">
 *    <input type="submit">
 *    </form>
 * author:wanghr100(灰豆寶寶.net)
 * email:

[email protected]
 * update:19:28 2004-8-23
 * 注意:寫正則表示式時一定要小心.不要讓"有心人"有空子鑽.
 * 已實現功能:
 * 對text,password,hidden,file,textarea,select,radio,checkbox進行合法性驗證
 * 待實現功能:把正則表式寫成個庫.
 *--------------- 客戶端表單通用驗證CheckForm(oForm) -----------------
 */
////////////////////////////////////////////////////////////////////////////////

//主函式
function CheckForm(oForm)
{
    var els = oForm.elements;
    //遍歷所有表元素
    for(var i=0;i<els.length;i++)
    {
        //是否需要驗證
        if(els[i].check)
        {
            //取得驗證的正則字串
            var sReg = els[i].check;
            //取得表單的值,用通用取值函式
            var sVal = GetValue(els[i]);
            //字串->正則表示式,不區分大小寫
            var reg = new RegExp(sReg,"i");
            if(!reg.test(sVal))
            {
                //驗證不通過,彈出提示warning
                alert(els[i].warning);
                //該表單元素取得焦點,用通用返回函式
                GoBack(els[i])  
                return false;
            }
        }
    }
}

//通用取值函式分三類進行取值
//文字輸入框,直接取值el.value
//單多選,遍歷所有選項取得被選中的個數返回結果"00"表示選中兩個
//單多下拉選單,遍歷所有選項取得被選中的個數返回結果"0"表示選中一個
function GetValue(el)
{
    //取得表單元素的型別
    var sType = el.type;
    switch(sType)
    {
        case "text":
        case "hidden":
        case "password":
        case "file":
        case "textarea": return el.value;
        case "checkbox":
        case "radio": return GetValueChoose(el);
        case "select-one":
        case "select-multiple": return GetValueSel(el);
    }
    //取得radio,checkbox的選中數,用"0"來表示選中的個數,我們寫正則的時候就可以通過0{1,}來表示選中個數
    function GetValueChoose(el)
    {
        var sValue = "";
        //取得第一個元素的name,搜尋這個元素組
        var tmpels = document.getElementsByName(el.name);
        for(var i=0;i<tmpels.length;i++)
        {
            if(tmpels[i].checked)
            {
                sValue += "0";
            }
        }
        return sValue;
    }
    //取得select的選中數,用"0"來表示選中的個數,我們寫正則的時候就可以通過0{1,}來表示選中個數
    function GetValueSel(el)
    {
        var sValue = "";
        for(var i=0;i<el.options.length;i++)
        {
            //單選下拉框提示選項設定為value=""
            if(el.options[i].selected && el.options[i].value!="")
            {
                sValue += "0";
            }
        }
        return sValue;
    }
}

//通用返回函式,驗證沒通過返回的效果.分三類進行取值
//文字輸入框,游標定位在文字輸入框的末尾
//單多選,第一選項取得焦點
//單多下拉選單,取得焦點
function GoBack(el)
{
    //取得表單元素的型別
    var sType = el.type;
    switch(sType)
    {
        case "text":
        case "hidden":
        case "password":
        case "file":
        case "textarea": el.focus();var rng = el.createTextRange(); rng.collapse(false); rng.select();
        case "checkbox":
        case "radio": var els = document.getElementsByName(el.name);els[0].focus();
        case "select-one":
        case "select-multiple":el.focus();
    }
} 

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>

不管是動態網站,還是其它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>


講了一堆"大道理"太抽象了,程式碼更有說服力!
 附:
　　Microsoft Windows指令碼技術,這裡有正則表示式的介紹
　　http://www.dqcn.net/net/CSDN/Book/SCRIPT56.chm
　　一個很不錯的正則表示式網站,裡面收集了很多的正則表示式.直接拿來主義吧.
　　http://www.regexlib.com/Default.aspx

原作者已做了大量的基礎工作，提供了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>