javascript--自己用的插件

/// <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;
        }
    });
});
时间: 2024-11-13 01:14:14

javascript--自己用的插件的相关文章

javascript操作cookie简单插件

javascript操作cookie简单插件:恰当灵活的使用cookie可以给用户带来诸多方便,尽管它一直被不少人士所诟病,但是它的应用还是无处不在,关于cookie这里就不多介绍了,具体可以参阅javascript如何操作cookie一章节,下面给出操作cookie的一个简单插件,代码如下: var cookie={ //创建cookie setCookie:function (name, value, iDay) { var oDate = new Date(); oDate.setDate

10个强大的Javascript表单验证插件推荐

创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScript表单验证插件,使用它们完全可以节省你的时间!希望你喜欢. 1. validate.js Validate.js是一个非常不错的JavaScript表单验证库,源于CodeIgniter API.该库相当轻巧(不到1KB),不要求任何JavaScript框架,可以在所有主流浏览器中运行(包括IE

纯 javascript 表单验证插件 ie 5,6,7,8,9,10 测试通过

由于只是初步测试通过,还有很多功能未去完善,比如单选和多选项等的验证 1.由于是纯js的,所以首先是获取dom对象的js (function (_this) { _window = _this ? _this.window : window; _window.thsoft = _window.thsoft || {}; _window.thsoft.dom = _window.thsoft.dom || {}; _window.thsoft.dom.tools = { /* parentNode

JavaScript示例三(插件检测)

<html> <head> <title>插件检测</title> </head> <body> <p>flash插件和QuickTime插件检测</p> <script type="text/javascript"> function hasPlugin(name){ name=name.toLowerCase(); for(var i=0;i<navigator.plu

JavaScript制作的SpinBox插件

今天用JavaScript写了一个SpinBox插件.先看一下效果吧: 用法是这样的: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <ti

14个华丽的javascript图表资源和插件

最近我分享一许多css/jquery 有用的资源,这里我将介绍一些用于构建华丽图表的javascript资源和插件,图表是展示数据最有效的方式. 建立一张图表有很多不同的方法,比如falsh.javascript.css,或者一些服务端语言php.asp等,下面介绍图表都是通过javascript实现. 1. Creating accessible charts using canvas and jQuery 这篇文章教你怎么利用 fgCharting(一个jQuery插件)把html的表格转换

jqPlot,一个 jQuery这个 JavaScript 框架的绘图插件

因为项目中需要做报表的功能,于是学习了如何使用jqplot这个绘图插件 结合ajax技术,动态交互后台数据 前前后后花了三四天的时间. 感觉它会出来的想说还可以. 我的后台模板是bootstrap,在模板中有jqplot的模板,我查看了源代码.修改了源代码就形成了现在的东西, 1 <script> 2 /* 3 Template Name: Color Admin - Responsive Admin Dashboard Template build with Twitter Bootstra

轻量级javascript自动完成autocomplete插件

Awesomplete是一款实用的轻量级js自动完成autocomplete插件.该autocomplete插件的特点有:轻量级.高度可定制.简单易用.无外部依赖等. 该js自动完成autocomplete插件支持HTML5的<datalist>属性,该属性只有现代浏览器才支持. 在线演示:http://www.htmleaf.com/Demo/201502251420.html 下载地址:http://www.htmleaf.com/jQuery/Form/201502251419.html

[转]7个高性能JavaScript代码高亮插件

对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,Sy

7个高性能JavaScript代码高亮插件

本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 Syn