Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

Recommend a packaged javascript plug-in for your own use_javascript skills

WBOY
Release： 2016-05-16 16:17:05
Original
981 people have browsed it

Please see the comments for details, there won’t be much BB here,

Provide the code: 

/// <reference path="vendor/jquery-1.4.1-vsdoc.js" />
///检测表单中的不能为空（.notnull）的验证
/*
 时间：2012-6-6
 作用：一对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回调函数;
 需要改进的地方：
 暂无
 更新时间：2014年12月3日 16:23:22
 作者：Amber.Xu
 */
//$(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 &#63; 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 <= 0) {//|| $(this).val() == this.defaultValue
        //        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 < len.length; i++) {
          switch ($.trim(len[i])) {
            ///联系方式                                                                      
            case "mobile":
              var reg = /^1\d{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") != $("#password2").attr("value")) {
                $(this).select(); //获取焦点
                $(this).parents(".form").find(".warn").text($(this).attr("logicmsg"));
                $(this).parents(".form").find(".errorMessage").show();
                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 = /^-&#63;([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0&#63;\.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位数,G+8位数；                              
            ///因公普通的是:P.+7位数；                              
            ///公务的是：S.+7位数 或者                              
            //S+8位数,以D开头的是外交护照                              
            case "postport": //护照号码
              var reg = /^(P\d{7}|G\d{8}|S\d{7,8}|D\d+|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;
  }
  ///此方法已经废弃
});
///单击改变背景颜色
$(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;
    }
  });
});
Copy after login

Basically all the commonly used functions are included, I hope you guys will like it.

Related labels：
javascript encapsulation plug-in
source：php.cn
Previous article：JS method to determine whether 360 Secure Browser has extremely fast core_javascript skills Next article：Detailed explanation of the use of $.each in jQuery_jquery
Statement of this Website
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
Latest Articles by Author
Latest Issues
CSS only method to dynamically modify image src on click without using JavaScript I need to change the src of an image on mouse click using only css like img:active{}
From 2024-04-06 19:25:49
0
1
505
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
JavaScript hover events on vendor-specific pseudo-elements I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...
From 2024-04-06 15:35:24
0
1
274
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...
From 2024-04-06 12:53:11
0
1
376
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template