封裝好的萬能偵測表單的方法_javascript技巧

偵測表單中的不能為空（.notnull）的驗證

 作用：一對form標籤下有多個（包括一個）表單需要提交時，使用js準確的判斷當前按鈕對那些元素做判斷

 用法：在form標籤下 找到目前 表單的容器 給予class="form"，目前表單的提交按鈕給予 class="check"
 需要驗證為空的元素給予class="notnull" nullmsg="xx不能為空！"提示，需要進行邏輯判斷的表單給予class="need"
 判斷的類型給予 class="num"(只能是數字) 驗證的提示 logicmsg="XX只能是數字"

 給予class="errorMessage"顯示錯誤訊息區塊
 給予class="warn"顯示錯誤訊息
 未使用js物件導向程式設計
 邏輯判斷，不傳入need標識，直接給出正規表示式屬性（自訂）regex="/^d$/"  做出判斷

 在外在實現
 Global.submitCallback button回呼函數
 Global.confirmCallback confirm回呼函數;
 需要改進的地方：
 暫無

複製程式碼 程式碼如下:

///
 */
//$(document).ready(
//    function () {
//        $("form").find(".notnull").bind({
//            focus: function () {
//                if ($(this).attr("value") == this.defaultValue) {
//                    $(this).attr("value", "");
//                }
//            },
//            blur: function () {
//                if ($(this).attr("value") == "") {
//                    $(this).attr("value", this.defaultValue);
//                }
//            }
//        });
//    }
//);
///*封裝萬能偵測表單的方法*/
///event.srcElement：引發事件的目標對象，常用於onclick事件。
///event.fromElement：引發事件的物件來源，常用於onmouseout和onmouseover事件。
///event.toElement：引發事件後，滑鼠移動到的目標來源，常用於onmouseout和onmouseover事件。
function Global() {
    var _self = this;
}
Global.submitCallback = null;
Global.confirmCallback = null;
$(document).ready(function () {
    //form body
    $("body").find(".form").each(function () {
        this.onclick = function (e) {
            var button = null;
            try {
                button = e.srcElement == null ? document.activeElement : e.srcElement;
            } catch (e) {
                console.log(e.message)
                button = document.activeElement;
            }
            if ($(button).is(".check")) {
                //alert("提交")
                var sub = (checkform(this) && CheckInputRex(this) && checkselect(this) && checkChecked(this));
                if (sub) {
                    // Call our callback, but using our own instance as the context
                    Global.submitCallback.call(this, [e]);
                }
                return sub;
            } else if ($(button).is(".confirm")) {
                //alert("刪除")
                var sub = confirm($(button).attr("title"));
                if (sub) {
                    Global.confirmCallback.call(this, [e]);
                }
                return sub;
            } else {
                //                    //alert("其它")
                return true;
            }
        }
    });
    /*偵測表單中不能為空的元素*/
    function checkform(form) {
        var b = true;
        $(form).find(".notnull").each(function () {
            if ($.trim($(this).val()).length                 //               if if (this.value != null) {
                //                    $(this).attr("value", "");
                //                }
                //alert($(this).attr("msg"))
                $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
                $(this).parents(".form").find(".errorMessage").show();
                $(this).select();
                $(this).focus();
                return b = false;
            }
        });
        if (b == true) {
            $(form).find(".warn").text("");
            $(form).find(".errorMessage").hide();
        }
        return b;
    }
    /*偵測表單中必選的下拉清單*/
    function checkselect(form) {
        var b = true;
        $(form).find(".select").each(function (i) {
            var ck = $(this).find('option:selected').text();
            if (ck.indexOf("選擇") > -1) {
                $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
                $(this).parents(".form").find(".errorMessage").show();
                $(this).select();
                $(this).focus();
                return b = false;
            }
        });
        return b;
    }
    /*偵測表單中必選的複選框*/
    function checkChecked(form) {
        var b = true;
        $(form).find(".checkbox").each(function (i) {
            var ck = $(this)[0].checked;
            if (!ck) {
                $(this).parents(".form").find(".warn").text($(this).attr("nullmsg"));
                $(this).parents(".form").find(".errorMessage").show();
                $(this).select();
                $(this).focus();
                return b = false;
            }
        });
        return b;
    }
    //檢查是否符合該正規表示式
    function GetFlase(value, reg, ele) {
        if (reg.test(value)) {
            return true;
        }
        $(ele).parents(".form").find(".warn").text($(ele).attr("logicmsg"));
        $(ele).parents(".form").find(".errorMessage").show();
        $(ele).focus();
        $(ele).select();
        return false; //不能提交
    }
    function CheckInputRex(form) {
        var b = true;
        $(form).find("input[type='text']").each(function () {
            if (typeof ($(this).attr("regex")) == 'string') {
                if ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
                    //目前表單的值
                    var value = $(this).attr("value") || $(this).val();
                    var regx = eval($(this).attr("regex"));
                    return b = GetFlase(value, regx, this);
                }
            }
        });
        return b;
    }
    ///檢查使用者輸入的對應的字元是否合法
    ///此方法已廢棄
    function CheckInput(form) {
        var b = true;
        $(form).find(".need").each(function () {
            if ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
                //目前表單的數值
                var value = $(this).attr("value");
                //id的值或因name的屬性的值如：[name="contact"]
                var name = $(this).attr("class");
                //檢視需要輸入的內容是否合法如：聯絡方式
                var len = name.split(" ");
                for (var i = 0; i                     switch ($.trim(len[i])) {
                        ///聯絡方式                                                                                                              case "mobile":
                            var reg = /^1d{10}$/;
;
                            return b = GetFlase(value, reg, this);
;                             break;
                        ///信箱                                                                                                              case "email":
                            var reg = /^[w-] (.[w-] )*@[w-] (.[w-] ) $/                             return b = GetFlase(value, reg, this);
;                             break;
                        ///兩個密碼是否一致                                                                                 
                        case "password":
                            break;
                        case "password2":
                            if ($("#password").attr("value") != $("#">2").(                                 $(this).select(); //取得焦點
                              與 $(this).                                 $(this).parents(".form").find(".errorMessage").                                 return b = false; //無法提交
不能提交
                            }
                            break;
                        case "worktel":
                        case "hometel": //居家電話
                            var reg = /^d{8}$/;
                            return b = GetFlase(value, reg, this);
;                             break;
                        case "post": //郵編
                            var reg = /^d{6}$/;
                            return b = GetFlase(value, reg, this);
;                             break;
                        case "bonus":
                        case "allowance":
                        case "FixedSalary":
var reg = /^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0 |0|[1-9]d)$/;
                            return b = GetFlase(value, reg, this);
;                             break;
                        case "identity":
                         地                             return b = GetFlase(value, reg, this);
;                           且所休息；
                        個案「高度」：
                            var reg = /^[1-2][0-9][0-9]$/
;
;                             return b = GetFlase(value, reg, this);
;                            且所休息；
                        個案「qq」：
                            var reg = /^[1-9][0-9]{4,}$/
;
;
;
;
;
;
;
;
;
;
;
;                             return b = GetFlase(value, reg, this);
;                            且所休息；
                        個案「開始時間」：
                        個案「結束時間」：
                            var reg = /^d{4}$/;
                            if (reg.test(value) && (parseInt($(".endtime").val()) > parkue) && (parseInt($(".endtime")。.                                化 b;                             }                             $.ligerDialog.alert($(this).attr("msg"))                             $(this).select(); //取得焦點                            回復為b=假； //無法提交                            且所休息；                         個案「num」：                             var reg = /^d $/;                             return b = GetFlase(value, reg, this);;                            且所休息；                         /// 以香港院內辦理至港澳通行證及香港的簽注。個人用普通護照號碼格式有:                                                                  ///14/15 7位數,G                            
                        ///因公普通的:P.7位數；                                  
                        ///公務的是：S. 7位數 或                                   
                        //S 8位數,以D開頭的是外交護照                                                           
                        case "postport": //護照號碼
                            var reg = /^(Pd{7}|Gd{8}|Sd{7,8,80]>>                             return b = GetFlase(value, reg, this);
;                             break;
                        case "bankaccount":
                            var reg = /^[0-9]{19}$/;
                            return b = GetFlase(value, reg, this);
;                             break;
                    } //switch
                } //for
            }
        });
        return b;
    }
    ///此方法已經廢棄
});
///點選改變背景顏色
$(document).ready(function () {
    var inputs = $("#top>.c>input");
    $(inputs).each(function () {
        this.onclick = function () {
            document.getElementById("main").style.backgroundColor = this.name;
            //$("#main").backgroundColor = this.name;
        }
    });
});

以上程式碼就是封裝過之後的萬用偵測表單的方法了，希望小夥伴們喜歡