Home  >  Article  >  Web Front-end  >  An encapsulated universal method for detecting forms_javascript skills

An encapsulated universal method for detecting forms_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:18:53990browse

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 <= 0) {//|| $(this).val() == this.defaultValue
// 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 < len.length; 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
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn