萬能通用智能JS表單驗證

源碼下載地址：http://download.csdn.net/detail/kimizhou_blog/4399392

Validator.js 和 Default.html
 這個JS通用新很強，注意結合html中的的樣式就好了，以及樣式中的圖片地址就好了，樣式我已經寫死在html中的

Validator.js

////////////////////////////////////////////////////////////////////////
////////作者： 虞益川
////////2009-7-1  轉用請標明出處
////////////////////////////////
Validator = {
    Require: /.+/,
    Email: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
    Phone: /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,
    Mobile: /^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/,
    Url: /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,
    IdCard: "this.IsIdCard(value)", Currency: /^\d+(\.\d+)?$/,
    Number: /^\d+$/, Zip: /^[1-9]\d{5}$/, QQ: /^[1-9]\d{4,8}$/,
    Integer: /^[-\+]?\d+$/, Double: /^[-\+]?\d+(\.\d+)?$/,
    English: /^[A-Za-z]+$/, Chinese: /^[\u0391-\uFFE5]+$/,
    Username: /^[a-z]\w{3,}$/i,
    UnSafe: /^(([A-Z]*|[a-z]*|\d*|[-_\~!@#\$%\^&\*\.\(\)\[\]\{\}<>\?\\\/\'\"]*)|.{0,5})$|\s/,
    Date: /^\d{4}-(0?[1-9]|1[0-2])-(0?[1-9]|[12]\d|3[12])(   (0?\d|1\d|2[0-4]):(0?\d|[1-5]\d):(0?\d|[1-5]\d))?$/,
    Title: /^.{1,60}$/,
    IsSafe: function(str) { return !this.UnSafe.test(str); },
    SafeString: "this.IsSafe(value)",
    Filter: "this.DoFilter(value, getAttribute('accept'))",
    Limit: "this.limit(value.length,getAttribute('min'),  getAttribute('max'))",
    LimitB: "this.limit(this.LenB(value), getAttribute('min'), getAttribute('max'))",
    Date: "this.IsDate(value, getAttribute('min'), getAttribute('format'))",
    Repeat: "value == document.getElementsByName(getAttribute('to'))[0].value",
    Range: "getAttribute('min') < (value|0) && (value|0) < getAttribute('max')",
    Compare: "this.compare(value,getAttribute('operator'),getAttribute('to'))",
    Custom: "this.Exec(value, getAttribute('regexp'))",
    Group: "this.MustChecked(getAttribute('name'), getAttribute('min'), getAttribute('max'))",
    ErrorItem: [document.forms[0]], ErrorMessage: ["以下原因導致提交失敗：\t\t\t\t"],
    Validate: function(theForm, mode) {
        var obj = theForm || event.srcElement;
        var count = obj.elements.length;
        this.ErrorMessage.length = 1;
        this.ErrorItem.length = 1;
        this.ErrorItem[0] = obj;
        for (var i = 0; i < count; i++) {
            with (obj.elements[i]) {
                var _dataType = getAttribute("dataType");
                if (typeof (_dataType) == "object" || typeof (this[_dataType]) == "undefined") continue;
                this.ClearState(obj.elements[i]); if (getAttribute("require") == "false" && value == "") continue;
                switch (_dataType) {
                    case "IdCard":
                    case "Date":
                    case "Repeat":
                    case "Range":
                    case "Compare":
                    case "Custom":
                    case "Group":
                    case "Limit":
                    case "LimitB":
                    case "SafeString":
                    case "Filter":
                        if (!eval(this[_dataType])) {
                            this.AddError(i, getAttribute("msg"));
                        }
                        break;
                    default:
                        if (_dataType == "Title") {
                            var tempValue = value.replace(/[^\x00-\xff]/g, "**");
                            if (!this[_dataType].test(tempValue)) {
                                this.AddError(i, getAttribute("msg"));
                            }
                        }
                        else {
                            if (!this[_dataType].test(value)) {
                                this.AddError(i, getAttribute("msg"));
                            }
                        }
                        break;
                }
            }
        }
        if (this.ErrorMessage.length > 1) {
            mode = mode || 1;
            var errCount = this.ErrorItem.length;
            switch (mode) {
                case 2:
                    for (var i = 1; i < errCount; i++) this.ErrorItem[i].style.color = "red";
                case 1:
                    this.ErrorItem[1].focus();
                    break; //alert(this.ErrorMessage.join("\n"));
                case 3:
                    for (var i = 1; i < errCount; i++) {
                        try {
                            var div = document.createElement("DIV");
                            div.id = "__ErrorMessagePanel";
                            //span.style.color = "red";
                            div.className = "error_info";
                            this.ErrorItem[i].parentNode.appendChild(div);
                            div.innerHTML = this.ErrorMessage[i].replace(/\d+:/, "*");
                        }
                        catch (e) {
                            //alert(e.description);
                        }
                    }
                    if (errCount > 1) {
                        //if (this.ErrorItem[errCount - 1].type != "hidden") 
                        //this.ErrorItem[errCount - 1].focus();
                    }
                    break;
                default:
                    //alert(this.ErrorMessage.join("\n"));
                    break;
            }
            return false;
        }
        return true;
    },
    limit: function(len, min, max) {
        min = min || 0; max = max || Number.MAX_VALUE; return min <= len && len <= max;
    }, LenB: function(str) { return str.replace(/[^\x00-\xff]/g, "**").length; }, ClearState: function(elem) { with (elem) { if (style.color == "red") style.color = ""; var lastNode = parentNode.childNodes[parentNode.childNodes.length - 1]; if (lastNode.id == "__ErrorMessagePanel") parentNode.removeChild(lastNode); } }, AddError: function(index, str) { this.ErrorItem[this.ErrorItem.length] = this.ErrorItem[0].elements[index]; this.ErrorMessage[this.ErrorMessage.length] = this.ErrorMessage.length + ":" + str; }, Exec: function(op, reg) { return new RegExp(reg, "g").test(op); }, compare: function(op1, operator, op2) { switch (operator) { case "NotEqual": return (op1 != op2); case "GreaterThan": return (op1 > op2); case "GreaterThanEqual": return (op1 >= op2); case "LessThan": return (op1 < op2); case "LessThanEqual": return (op1 <= op2); default: return (op1 == op2); } }, MustChecked: function(name, min, max) { var groups = document.getElementsByName(name); var hasChecked = 0; min = min || 1; max = max || groups.length; for (var i = groups.length - 1; i >= 0; i--) if (groups[i].checked) hasChecked++; return min <= hasChecked && hasChecked <= max; }, DoFilter: function(input, filter) { return new RegExp("^.+\.(?=EXT)(EXT)$".replace(/EXT/g, filter.split(/\s*,\s*/).join("|")), "gi").test(input); }, IsIdCard: function(number) { var date, Ai; var verify = "10x98765432"; var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; var area = ['', '', '', '', '', '', '', '', '', '', '', '北京', '天津', '河北', '山西', '內蒙古', '', '', '', '', '', '遼寧', '吉林', '黑龍江', '', '', '', '', '', '', '', '上海', '江蘇', '浙江', '安微', '福建', '江西', '山東', '', '', '', '河南', '湖北', '湖南', '廣東', '廣西', '海南', '', '', '', '重慶', '四川', '貴州', '雲南', '西藏', '', '', '', '', '', '', '陝西', '甘肅', '青海', '寧夏', '新疆', '', '', '', '', '', '臺灣', '', '', '', '', '', '', '', '', '', '香港', '澳門', '', '', '', '', '', '', '', '', '國外']; var re = number.match(/^(\d{2})\d{4}(((\d{2})(\d{2})(\d{2})(\d{3}))|((\d{4})(\d{2})(\d{2})(\d{3}[x\d])))$/i); if (re == null) return false; if (re[1] >= area.length || area[re[1]] == "") return false; if (re[2].length == 12) { Ai = number.substr(0, 17); date = [re[9], re[10], re[11]].join("-"); } else { Ai = number.substr(0, 6) + "19" + number.substr(6); date = ["19" + re[4], re[5], re[6]].join("-"); } if (!this.IsDate(date, "ymd")) return false; var sum = 0; for (var i = 0; i <= 16; i++) { sum += Ai.charAt(i) * Wi[i]; } Ai += verify.charAt(sum % 11); return (number.length == 15 || number.length == 18 && number == Ai); }, IsDate: function(op, formatString) { formatString = formatString || "ymd"; var m, year, month, day; switch (formatString) { case "ymd": m = op.match(new RegExp("^((\\d{4})|(\\d{2}))([-./])(\\d{1,2})\\4(\\d{1,2})$")); if (m == null) return false; day = m[6]; month = m[5] * 1; year = (m[2].length == 4) ? m[2] : GetFullYear(parseInt(m[3], 10)); break; case "dmy": m = op.match(new RegExp("^(\\d{1,2})([-./])(\\d{1,2})\\2((\\d{4})|(\\d{2}))$")); if (m == null) return false; day = m[1]; month = m[3] * 1; year = (m[5].length == 4) ? m[5] : GetFullYear(parseInt(m[6], 10)); break; default: break; } if (!parseInt(month)) return false; month = month == 0 ? 12 : month; var date = new Date(year, month - 1, day); return (typeof (date) == "object" && year == date.getFullYear() && month == (date.getMonth() + 1) && day == date.getDate()); function GetFullYear(y) { return ((y < 30 ? "20" : "19") + y) | 0; } }
}

<!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>
    <title></title>
    <script type="text/javascript" language="javascript" src="Scripts/Validator.js"></script>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
     <style type="text/css" >
         .error_info{border: 1px solid #FF7105;BACKGROUND: url(cuo.gif) #FFF5D9 no-repeat; background-position: 5px 3px; height:23px; line-height:23px; text-indent:25px; margin-top:3px; margin-bottom:3px;   font-size:12px}
    </style>
</head>
<body>
    <form id="formContent">
        <table>
            <tr>
                <td>用戶名：</td>
                <td><input type="text" check=".+" msg="用戶名不能爲空,且不能含有空格" name="UserName" datatype="Require" /></td>
                <td></td>
            </tr>
             <tr>
                <td>帳號：</td>
                <td><input type="text" check=".+" msg="賬號不能爲空,且不能含有空格" name="UserAccount" datatype="Require" /></td>
                <td></td>
            </tr>
             <tr>
                <td>密碼：</td>
                <td><input type="password" check=".+" msg="密碼不能爲空,且不能含有空格" name="PWD" datatype="Require" /></td>
                <td></td>
            </tr>
             <tr>
                <td>手機：</td>
                <td><input type="text" check=".+" msg="手機不能爲空,且不能含有空格" name="Tell" datatype="Require" /></td>
                <td></td>
            </tr>
             <tr>
                <td>聯繫地址：</td>
                <td><input type="text" check=".+" msg="聯繫地址不能爲空,且不能含有空格" name="Address" datatype="Require"/></td>
                <td></td>
            </tr>
             <tr>
                <td>電子郵箱:</td>
                <td><input type="text" check=".+" msg="郵箱格式不正確" name="Mark" datatype="Email" /></td>
                <td></td>
            </tr>
            <tr>
                <td><input type="button" value="提交" οnclick="onSubmit()" /></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </form>

    <script type="text/javascript" language="javascript">
        function onSubmit() {
            var bret = Validator.Validate($('#formContent')[0], 3);
            if (bret)
                alert("成功！");
        }

    </script>


</body>
</html>