/**/ /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*
* 客戶端表單通用驗證CheckForm(oForm)
*
* 功能:通用驗證所有的表單元素.
*
* 使用:
* <script language="JavaScript" src="Check.js" type="text/JavaScript"></script>
* <form name="form1" onsubmit="return CheckForm(this)">
* <input type="text" name="id" check="^\S+$" warning="id不能為空,且不能含有空格">
* <input type="submit">
* </form>
*
* 對text,password,hidden,file,textarea,select,radio,checkbox進行合法性驗證
*
* 正則表達式示例:
* ^\S+$ 不能為空,且不能含有空格
* \S{6,} 長度6位以上
* ^\d+$ 數字
* ^\d+(\.\d+)?$ 數字,允許小數點
* (.*)(\.jpg|\.bmp)$ 文件格式為jpg和bmp
* ^\d{4}\-\d{1,2}-\d{1,2}$
* ^(19|20)\d\d\-(0|1)\d\-(0|1|2|3)\d$
* 日期格式2005-5-8
* ^0$ 必選一個
* ^0{2,}$ 選擇二個或以上
* ^[\s|\S]{20,}$ 不能為空,且不少于20字
* ^[^\d\-_][\w\-]*[^\-_]$ 用戶名格式
* ^[\u4E00-\u9FA5]*$ 漢字
* ^[^\d\-_][\w\-]*[^\-_]@[^\-][a-zA-Z\d\-]*[^\-](\.[^\-][a-zA-Z\d\-]*[^\-])*\.[a-zA-Z]{3}(\.[a-zA-Z]{2})?$
* 電子信箱
*
* 正則表達式內容:
* 字符 說明
* \ 將下一字符標記為特殊字符、文本、反向引用或八進制轉義符。例如，“n”匹配字符“n”。“\n”匹配換行符。序列“\\”匹配“\”，“\(”匹配“(”。
* ^ 匹配輸入字符串開始的位置。如果設置了 RegExp 對象的 Multiline 屬性，^ 還會與“\n”或“\r”之后的位置匹配。
* $ 匹配輸入字符串結尾的位置。如果設置了 RegExp 對象的 Multiline 屬性，$ 還會與“\n”或“\r”之前的位置匹配。
* * 零次或多次匹配前面的字符或子表達式。例如，zo* 匹配“z”和“zoo”。* 等效于 {0,}。
* + 一次或多次匹配前面的字符或子表達式。例如，“zo+”與“zo”和“zoo”匹配，但與“z”不匹配。+ 等效于 {1,}。
* ? 零次或一次匹配前面的字符或子表達式。例如，“do(es)?”匹配“do”或“does”中的“do”。? 等效于 {0,1}。
* {n} n 是非負整數。正好匹配 n 次。例如，“o{2}”與“Bob”中的“o”不匹配，但與“food”中的兩個“o”匹配。
* {n,} n 是非負整數。至少匹配 n 次。例如，“o{2,}”不匹配“Bob”中的“o”，而匹配“foooood”中的所有 o。'o{1,}' 等效于 'o+'。'o{0,}' 等效于 'o*'。
* {n,m} m 和 n 是非負整數，其中 n <= m。至少匹配 n 次，至多匹配 m 次。例如，“o{1,3}”匹配“fooooood”中的頭三個 o。'o{0,1}' 等效于 'o?'。注意：您不能將空格插入逗號和數字之間。
* ? 當此字符緊隨任何其他限定符（*、+、?、{n}、{n,}、{n,m}）之后時，匹配模式是“非貪心的”。“非貪心的”模式匹配搜索到的、盡可能短的字符串，而默認的“貪心的”模式匹配搜索到的、盡可能長的字符串。例如，在字符串“oooo”中，“o+?”只匹配單個“o”，而“o+”匹配所有“o”。
* . 匹配除“\n”之外的任何單個字符。若要匹配包括“\n”在內的任意字符，請使用諸如“[\s\S]”之類的模式。
* (pattern) 匹配 pattern 并捕獲該匹配的子表達式?？梢允褂?nbsp;$0
$9 屬性從結果“匹配”集合中檢索捕獲的匹配。若要匹配括號字符 ( )，請使用“\(”或者“\)”。
* (?:pattern) 匹配 pattern 但不捕獲該匹配的子表達式，即它是一個非捕獲匹配，不存儲供以后使用的匹配。這對于用“或”字符 (|) 組合模式部件的情況很有用。例如，與“industry|industries”相比，“industr(?:y| ies)”是一個更加經濟的表達式。
* (?=pattern) 執行正向預測先行搜索的子表達式，該表達式匹配處于匹配 pattern 的字符串的起始點的字符串。它是一個非捕獲匹配，即不能捕獲供以后使用的匹配。例如，“Windows (?=95| 98| NT| 2000)”與“Windows 2000”中的“Windows”匹配，但不與“Windows 3.1”中的“Windows”匹配。預測先行不占用字符，即發生匹配后，下一匹配的搜索緊隨上一匹配之后，而不是在組成預測先行的字符后。
* (?!pattern) 執行反向預測先行搜索的子表達式，該表達式匹配不處于匹配 pattern 的字符串的起始點的搜索字符串。它是一個非捕獲匹配，即不能捕獲供以后使用的匹配。例如，“Windows (?!95| 98| NT| 2000)”與“Windows 3.1”中的“Windows”匹配，但不與“Windows 2000”中的“Windows”匹配。預測先行不占用字符，即發生匹配后，下一匹配的搜索緊隨上一匹配之后，而不是在組成預測先行的字符后。
* x| y 與 x 或 y 匹配。例如，“z| food”與“z”或“food”匹配。“(z| f)ood”與“zood”或“food”匹配。
* [xyz] 字符集。匹配包含的任一字符。例如，“[abc]”匹配“plain”中的“a”。
* [^xyz] 反向字符集。匹配未包含的任何字符。例如，“[^abc]”匹配“plain”中的“p”。
* [a-z] 字符范圍。匹配指定范圍內的任何字符。例如，“[a-z]”匹配“a”到“z”范圍內的任何小寫字母。
* [^a-z] 反向范圍字符。匹配不在指定的范圍內的任何字符。例如，“[^a-z]”匹配任何不在“a”到“z”范圍內的任何字符。
* \b 匹配一個字邊界，即字與空格間的位置。例如，“er\b”匹配“never”中的“er”，但不匹配“verb”中的“er”。
* \B 非字邊界匹配。“er\B”匹配“verb”中的“er”，但不匹配“never”中的“er”。
* \cx 匹配由 x 指示的控制字符。例如，\cM 匹配一個 Control-M 或回車符。x 的值必須在 A-Z 或 a-z 之間。如果不是這樣，則假定 c 就是“c”字符本身。
* \d 數字字符匹配。等效于 [0-9]。
* \D 非數字字符匹配。等效于 [^0-9]。
* \f 換頁符匹配。等效于 \x0c 和 \cL。
* \n 換行符匹配。等效于 \x0a 和 \cJ。
* \r 匹配一個回車符。等效于 \x0d 和 \cM。
* \s 匹配任何空白字符，包括空格、制表符、換頁符等。與 [ \f\n\r\t\v] 等效。
* \S 匹配任何非空白字符。等價于 [^ \f\n\r\t\v]。
* \t 制表符匹配。與 \x09 和 \cI 等效。
* \v 垂直制表符匹配。與 \x0b 和 \cK 等效。
* \w 匹配任何字類字符，包括下劃線。與“[A-Za-z0-9_]”等效。
* \W 任何非字字符匹配。與“[^A-Za-z0-9_]”等效。
* \xn 匹配 n，此處的 n 是一個十六進制轉義碼。十六進制轉義碼必須正好是兩位數長。例如，“\x41”匹配“A”。“\x041”與“\x04”&“1”等效。允許在正則表達式中使用 ASCII 代碼。
* \num 匹配 num，此處的 num 是一個正整數。到捕獲匹配的反向引用。例如，“(.)\1”匹配兩個連續的相同字符。
* \n 標識一個八進制轉義碼或反向引用。如果 \n 前面至少有 n 個捕獲子表達式，那么 n 是反向引用。否則，如果 n 是八進制數 (0-7)，那么 n 是八進制轉義碼。
* \nm 標識一個八進制轉義碼或反向引用。如果 \nm 前面至少有 nm 個捕獲子表達式，那么 nm 是反向引用。如果 \nm 前面至少有 n 個捕獲，那么 n 是反向引用，后面跟 m。如果前面的條件均不存在，那么當 n 和 m 是八進制數 (0-7) 時，\nm 匹配八進制轉義碼 nm。
* \nml 當 n 是八進制數 (0-3)，m 和 l 是八進制數 (0-7) 時，匹配八進制轉義碼 nml。
* \un 匹配 n，其中 n 是以四位十六進制數表示的 Unicode 字符。例如，\u00A9 匹配版權符號 (\u00A9)。
*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
// 主函數
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 ;
}
}
}
}
// 通用取值函數分三類進行取值
// (1)文本輸入框,直接取值el.value
// (2)單多選,遍歷所有選項,取得被選中的個數,返回結果"00"表示選中兩個
// (3)單多下拉菜單,遍歷所有選項,取得被選中的個數,返回結果"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;
}
}
// 通用返回函數,驗證沒通過返回的效果.分三類進行取值
// (1)文本輸入框,光標定位在文本輸入框的末尾
// (2)單多選,第一選項取得焦點
// (3)單多下拉菜單,取得焦點
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();
}
}
posted on 2008-03-14 11:35
Crying 閱讀(730)
評論(0) 編輯 收藏 所屬分類:
JavaScript和CSS