推荐一个自己用的封装好的javascript插件


Posted in Javascript onJanuary 29, 2015

具体内容请看注释,这里就不多BB了,

奉上代码:

/// <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 ? 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 = /^-?([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位数,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;
    }
  });
});

基本上常用的功能都封装在内了,希望小伙伴们能够喜欢。

Javascript 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
JS弹出窗口的运用与技巧大全
Nov 01 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
Javascript中window.name属性详解
Nov 19 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 #Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 #Javascript
javascript面向对象程序设计(一)
Jan 29 #Javascript
jquery调取json数据实现省市级联的方法
Jan 29 #Javascript
JavaScript中实现单体模式分享
Jan 29 #Javascript
angular简介和其特点介绍
Jan 29 #Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 #Javascript
You might like
php中strtotime函数用法详解
2014/11/15 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
jQuery中animate用法实例分析
2015/03/09 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
Javascript中字符串和数字的操作方法整理
2017/01/22 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
Python3 中文文件读写方法
2018/01/23 Python
Sanic框架流式传输操作示例
2018/07/18 Python
如何使用Python实现斐波那契数列
2019/07/02 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
python 画条形图(柱状图)实例
2020/04/24 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
实习心得体会
2014/01/02 职场文书
愚人节活动策划方案
2014/03/11 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
保洁员岗位职责
2015/02/04 职场文书
2016年社区国庆节活动总结
2016/04/01 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
nginx之内存池的实现
2022/06/28 Servers