An encapsulated universal method for detecting forms_javascript skills

Detect validation that the form cannot be empty (.notnull)

Function: When there are multiple (including one) forms under a pair of form tags that need to be submitted, use js to accurately judge the current button and those elements

Usage: Find the container of the current form under the form tag and give it class="form", and the submit button of the current form is given class="check"
Elements that need to be verified as empty are given class="notnull" nullmsg="xx cannot be empty!" prompts, and forms that require logical judgment are given class="need"
The judgment type is given class="num" (can only be a number) verification prompt logicmsg="XX can only be a number"

Give class="errorMessage" to display error message block
Give class="warn" to display error message
Not using js object-oriented programming
Logical judgment, do not pass in the need identifier, directly give the regular expression attribute (custom) regex="/^d$/" to make a judgment

Implemented externally
Global.submitCallback button callback function
Global.confirmCallback confirm callback function;
Areas for improvement:
None

Copy code The code is as follows:

///
*/
//$(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);
//               }
//           }
//       });
// }
//);
///*Method to encapsulate a universal detection form*/
///event.srcElement: The target object that triggers the event, often used for onclick events.
///event.fromElement: The object source that triggers the event, often used for onmouseout and onmouseover events.
///event.toElement: The target source to which the mouse moves after the event is triggered. It is often used for onmouseout and onmouseover events.
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("submit")
                  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("delete")
              var sub = confirm($(button).attr("title"));
                       if (sub) {
Global.confirmCallback.call(this, [e]);
                }
                    return sub;
              } else {
                                                                                                                                                                                                                           ​                     return true;
            }
}
});
/*Detect elements that cannot be empty in the form*/
Function checkform(form) {
        var b = true;
           $(form).find(".notnull").each(function () {
If ($.trim($(this).val()).length // if (this.value! = Null) {
//                                                                                                                                                                                                                                                                                                                                                                                                    // //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;
}
/*Required drop-down list in the detection form*/
Function checkselect(form) {
        var b = true;
           $(form).find(".select").each(function (i) {
              var ck = $(this).find('option:selected').text();
If (ck.indexOf("select") > -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;
}
/*Check the required checkboxes in the detection form*/
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;
}
//Check whether it matches the regular expression
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; //Cannot submit
}
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) {
//The value of the current form
                      var value = $(this).attr("value") || $(this).val();
                  var regx = eval($(this).attr("regex"));
                          return b = GetFlase(value, regx, this);
                }
            }
        });
         return b;
}
///Check whether the corresponding characters entered by the user are legal
///This method is obsolete
Function CheckInput(form) {
        var b = true;
$(form).find(".need").each(function () {
If ($.trim($(this).val()).length > 0 && $(this).val() != this.defaultValue) {
//The value of the current form
              var value = $(this).attr("value");
                          //The value of id or the value of the name attribute is such as: [name="contact"]
              var name = $(this).attr("class");
                                 // Check whether the content to be entered is legal, such as: Contact information
              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;
///Are the two passwords consistent?                                                                                               case "password":
break;
case "password2":
If ($("#password").attr("value") != $("#password2").attr("value")) {
                                                                            $(this).parents(".form").find(".warn").text($(this).attr("logicmsg"));
$(this).parents(".form").find(".errorMessage").show();
                                                                                                                                                                                                                                                                                                                                                       } break;
case "worktel":
case "hometel": //Home phone number
                                                                                                                                                                                                                                                         var reg = /^d{8}$/;
Return b = GetFlase(value, reg, this);
break;
                          case "post": //Postcode
                                            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":
                            var reg = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/;
Return b = GetFlase(value, reg, this);
                            break;
                        case "height":
                            var reg = /^[1-2][0-9][0-9]$/;
                            return b = GetFlase(value, reg, this);
                            break;
                        case "qq":
                            var reg = /^[1-9][0-9]{4,}$/;
                            return b = GetFlase(value, reg, this);
                            break;
                        case "begintime":
                        case "endtime":
                            var reg = /^d{4}$/;
                            if (reg.test(value) && (parseInt($(".endtime").val()) > parseInt($(".begintime").val()))) {
                                return b;
                            }
                            $.ligerDialog.alert($(this).attr("msg"))
                            $(this).select(); //获取焦点
                            return b = false; //不能提交
                            break;
                        case "num":
                            var reg = /^d $/;
                            return b = GetFlase(value, reg, this);
                            break;
                        ///大陆去香港需要办理往来港澳通行证和香港的签注.因私普通护照号码格式有:                                                          
///14/15 7 digits, G 8 digits; ///The common one is: P. 7 digits; ///For official purposes: S. 7 digits or //S 8 digits, starting with D is a diplomatic passport                               case "postport": //Passport number
                               var reg = /^(Pd{7}|Gd{8}|Sd{7,8}|Dd |1[4,5]d{7})$/;
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;
}
///This method has been deprecated
});
///Click to change the background color
$(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;
}
});
});



The above code is the encapsulated universal form detection method. I hope you guys like it