簡單的js表單驗證函式_表單特效

網站製作中，表單驗證的功能是很常用的。
有些時候，用一些成型的js控制項會比較方便，但是又過於龐大和難以維護（本人的js水平不高）
所以乾脆自己寫了一個。至於好不好，靈活不靈活，還請大家指點（先上圖，很難看，請不要介意）：

代碼：

複製代碼 代碼如下:

表單驗證js代碼

var fv =
{
    lang: "zh-cn",  //錯誤提示言
    inValidedStr: "=",  //初始隨意複製，使其長度不為0
    mail: function(elementID)   //驗證郵件地址合法,elementID為input文本輸入框的ID
    {
        if (elementID == null) { return true; }
        else
        {
            var reg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
            if (reg.test(document.getElementById(elementID).value))
            {
                fv.inValidedStr = fv.inValidedStr.replace(/mail/g, "");
                fv.inValidedStr = fv.inValidedStr.replace("=", "");
                validMsg(fv.lang, "mail", "mailInfo");
            }
            else
            {
                fv.inValidedStr = fv.inValidedStr + "mail";
                errorMsg(fv.lang, "mail", "mailInfo");
            }
        }
    },
    username: function(elementID)   //驗證使用者名稱合法 字母數字底線，長度為6-20
    {
        if (elementID == null) { return true; }
        else
        {
            var reg = /^[a-zA-Z0-9_]{5,19}$/;
            if (reg.test(document.getElementById(elementID).value))
            {
                fv.inValidedStr = fv.inValidedStr.replace(/username/g, "");
                fv.inValidedStr = fv.inValidedStr.replace("=", "");
                validMsg(fv.lang, "username", "usernameInfo");
            }
            else
            {
                fv.inValidedStr = fv.inValidedStr + "username";
                errorMsg(fv.lang, "username", "usernameInfo");
            }
        }
    },

    //....可以加其他驗證
    isValid: function() { return (fv.inValidedStr.length == 0); }
};

//驗證成功時的資訊 elementID 為資訊提示的html單元的id
function validMsg(lang, valueType, elementID)
{
    var msgInfo = "";
    var isCn = lang == "zh-cn";

    switch (valueType)
    {
        case "mail":
            msgInfo = isCn ? " √ 地址正確" : " √ the mail address is valided";
            break;
        case "username":
            msgInfo = isCn ? " √ 成功" : " √ The account valided ";
            break;
        case "password":
            msgInfo = isCn ? " √ 成功" : " √ Valided format!";
            break;
        //.....對應增加其他情況
        default:
            break;
    }
    document.getElementById(elementID).innerHTML = msgInfo;
    document.getElementById(elementID).style.color = "green";
}

//驗證失敗時的資訊
function errorMsg(lang, valueType, elementID)
{
    var msgInfo = "";
    var isCn = lang == "zh-cn";

    switch (valueType)
    {
        case "mail":
            msgInfo = isCn ? " × 請輸入正確的郵件地址" : " × The e-mail format is error,plz input right format .eg. abc@def.com.";
            break;
        case "username":
            msgInfo = isCn ? " × 長度6-20個字元，只能為數字，字母，底線組成" : " × The account just ";
            break;
        case "password":
            msgInfo = isCn ? " × 密碼為……" : " × inValided format!";
            break;
        //....對應增加其他情況
        default:
            break;
    }
        document.getElementById(elementID).innerHTML = msgInfo;
        document.getElementById(elementID).style.color = "red";
}

前台代碼（aspx頁面）：

複製代碼 代碼如下:

前台aspx頁面代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Common/Js/formValid.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript">fv.lang = "en"/*如去掉此行，則預設為中文提示*/</script>
        <input type="text" name="mail" id="mail" onblur="fv.mail('mail')" /><span id="mailInfo"></span><br />
        <asp:TextBox ID="username" runat="server" onblur="fv.username('username')"></asp:TextBox><span id="usernameInfo"></span><br />
        <input type="submit" onclick="return fv.isValid()" value="Submit" />
    </div>
    </form>
</body>
</html>

然後，如果需要其他的驗證，則加入即可。相關Regex

複製代碼 代碼如下:

匹配中文字元的Regex： [u4e00-u9fa5]
評註：匹配中文還真是個頭疼的事，有了這個運算式就好辦了
匹配雙位元組字元(包括漢字在內)：[^x00-xff]
評註：可以用來計算字串的長度（一個雙位元組字元長度計2，ASCII字元計1）
匹配空白行的Regex：ns*r
評註：可以用來刪除空白行
匹配HTML標記的Regex：< (S*?)[^>]*>.*?|< .*? />
評註：網上流傳的版本太糟糕，上面這個也僅僅能匹配部分，對於複雜的嵌套標記依舊無能為力
匹配首尾空白字元的Regex：^s*|s*$
評註：可以用來刪除行首行尾的空白字元(包括空格、定位字元、換頁符等等)，非常有用的運算式
匹配Email地址的Regex：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
評註：表單驗證時很實用
匹配網址URL的Regex：[a-zA-z]+://[^s]*
評註：網上流傳的版本功能很有限，上面這個基本可以滿足需求
匹配帳號是否合法(字母開頭，允許5-16位元組，允許字母數字底線)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
評註：表單驗證時很實用
匹配國內電話號碼：d{3}-d{8}|d{4}-d{7}
評註：匹配形式如 0511-4405222 或 021-87888822
匹配騰訊QQ號：[1-9][0-9]{4,}
評註：騰訊QQ號從10000開始
匹配中國郵遞區號：[1-9]d{5}(?!d)
評註：中國郵遞區號為6位元字
匹配身份證：d{15}|d{18}
評註：中國的身份證為15位或18位
匹配ip地址：d+.d+.d+.d+
評註：提取ip地址時有用

匹配特定數字：
^[1-9]d*$　 　 //匹配正整數
^-[1-9]d*$ 　 //匹配負整數
^-?[1-9]d*$　　 //匹配整數
^[1-9]d*|0$　 //匹配非負整數（正整數 + 0）
^-[1-9]d*|0$　　 //匹配非正整數（負整數 + 0）
^[1-9]d*.d*|0.d*[1-9]d*$　　 //匹配正浮點數
^-([1-9]d*.d*|0.d*[1-9]d*)$　 //匹配負浮點數
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$　 //匹配浮點數
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$　　 //匹配非負浮點數（正浮點數 + 0）
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$　　//匹配非正浮點數（負浮點數 + 0）
評註：處理大量資料時有用，具體應用時注意修正
匹配特定字串：
^[A-Za-z]+$　　//匹配由26個英文字母組成的字串
^[A-Z]+$　　//匹配由26個英文字母的大寫組成的字串
^[a-z]+$　　//匹配由26個英文字母的小寫組成的字串
^[A-Za-z0-9]+$　　//匹配由數字和26個英文字母組成的字串
^w+$　　//匹配由數字、26個英文字母或者底線組成的字串
在使用RegularExpressionValidator驗證控制項時的驗證功能及其驗證運算式介紹如下:
只能輸入數字：“^[0-9]*$”
只能輸入n位的數字：“^d{n}$”
只能輸入至少n位元字：“^d{n,}$”
只能輸入m-n位的數字：“^d{m,n}$”
只能輸入零和非零開頭的數字：“^(0|[1-9][0-9]*)$”
只能輸入有兩位小數的正實數：“^[0-9]+(.[0-9]{2})?$”
只能輸入有1-3位小數的正實數：“^[0-9]+(.[0-9]{1,3})?$”
只能輸入非零的正整數：“^+?[1-9][0-9]*$”
只能輸入非零的負整數：“^-[1-9][0-9]*$”
只能輸入長度為3的字元：“^.{3}$”
只能輸入由26個英文字母組成的字串：“^[A-Za-z]+$”
只能輸入由26個大寫英文字母組成的字串：“^[A-Z]+$”
只能輸入由26個小寫英文字母組成的字串：“^[a-z]+$”
只能輸入由數字和26個英文字母組成的字串：“^[A-Za-z0-9]+$”
只能輸入由數字、26個英文字母或者底線組成的字串：“^w+$”
驗證使用者密碼:“^[a-zA-Z]w{5,17}$”正確格式為：以字母開頭，長度在6-18之間，

只能包含字元、數字和底線。
驗證是否含有^%&',;=?前台aspx頁面代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Common/Js/formValid.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript">fv.lang = "en"/*如去掉此行，則預設為中文提示*/</script>
        <input type="text" name="mail" id="mail" onblur="fv.mail('mail')" /><span id="mailInfo"></span><br />
        <asp:TextBox ID="username" runat="server" onblur="fv.username('username')"></asp:TextBox><span id="usernameInfo"></span><br />
        <input type="submit" onclick="return fv.isValid()" value="Submit" />
    </div>
    </form>
</body>
</html>

XXquot;等字元：“[^%&',;=?$x22]+”
只能輸入漢字：“^[u4e00-u9fa5],{0,}$”
驗證Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
驗證InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
驗證電話號碼：“^((d{3,4})|d{3,4}-)?d{7,8}$”

正確格式為：“XXXX-XXXXXXX”，“XXXX-XXXXXXXX”，“XXX-XXXXXXX”，

“XXX-XXXXXXXX”，“XXXXXXX”，“XXXXXXXX”。
驗證社會安全號碼（15位或18位元字）：“^d{15}|d{}18$”
驗證一年的12個月：“^(0?[1-9]|1[0-2])$”正確格式為：“01”-“09”和“1”“12”
驗證一個月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”

正確格式為：“01”“09”和“1”“31”。

匹配中文字元的Regex： [u4e00-u9fa5]
匹配雙位元組字元(包括漢字在內)：[^x00-xff]
匹配空行的Regex：n[s| ]*r
匹配HTML標記的Regex：/< (.*)>.*|< (.*) />/
匹配首尾空格的Regex：(^s*)|(s*$)
匹配Email地址的Regex：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配網址URL的Regex：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
(1)應用：計算字串的長度（一個雙位元組字元長度計2，ASCII字元計1）
String.prototype.len=function(){return this.replace([^x00-xff]/g,"aa").length;}
(2)應用：javascript中沒有像vbscript那樣的trim函數，我們就可以利用這個運算式來實現
String.prototype.trim = function()
{
return this.replace(/(^s*)|(s*$)/g, "");
}
(3)應用：利用Regex分解和轉換IP地址
function IP2V(ip) //IP地址轉換成對應數值
{
re=/(d+).(d+).(d+).(d+)/g //匹配IP地址的Regex
if(re.test(ip))
{
return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
}
else
{
throw new Error("Not a valid IP address!")
}
}
(4)應用：從URL地址中提取檔案名稱的javascript程式
s="http://www.jb51.net/page1.htm";
s=s.replace(/(.*/){0,}([^.]+).*/ig,"$2") ; //Page1.htm
(5)應用：利用Regex限制網頁表單裡的文字框輸入內容
用Regex限制只能輸入中文：onkeyup="value="/blog/value.replace(/["^u4E00-u9FA5]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))"
用Regex限制只能輸入全形字元： onkeyup="value="/blog/value.replace(/["^uFF00-uFFFF]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^uFF00-uFFFF]/g,''))"
用Regex限制只能輸入數字：onkeyup="value="/blog/value.replace(/["^d]/g,'') "onbeforepaste= "clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"
用Regex限制只能輸入數字和英文：onkeyup="value="/blog/value.replace(/[W]/g,"'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''