封装好的一个万能检测表单的方法


Posted in Javascript onJanuary 21, 2015

检测表单中的不能为空(.notnull)的验证

 作用:一对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回调函数;
 需要改进的地方:
 暂无

/// <reference path="vendor/jquery-1.4.1-vsdoc.js" />

 */

//$(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 相关文章推荐
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
Javascript Ajax异步读取RSS文档具体实现
Dec 12 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
js实现文本框宽度自适应文本宽度的方法
Aug 13 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
Jul 19 Javascript
js实现随机抽奖
Mar 19 Javascript
html的DOM中Event对象onblur事件用法实例
Jan 21 #Javascript
JS简单计算器实例
Jan 20 #Javascript
jQuery元素的隐藏与显示实例
Jan 20 #Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 #Javascript
DOM基础教程之使用DOM控制表单
Jan 20 #Javascript
DOM基础教程之使用DOM控制表格
Jan 20 #Javascript
jQuery实现tag便签去重效果的方法
Jan 20 #Javascript
You might like
php xml-rpc远程调用
2008/12/19 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
js获取系统的根路径实现介绍
2013/09/08 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
ionic3双击返回退出应用的方法
2019/09/17 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
简单了解什么是神经网络
2017/12/23 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
Python多进程写入同一文件的方法
2019/01/14 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
Python发展史及网络爬虫
2019/06/19 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
python实现字符串和数字拼接
2020/03/02 Python
Pandas的Apply函数具体使用
2020/07/21 Python
安全检查验收制度
2014/01/12 职场文书
办公室秘书岗位职责范本
2014/02/11 职场文书
股份合作协议书范本
2014/04/14 职场文书
节约用水标语
2014/06/11 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
2016年“11.11”光棍节活动总结
2016/04/05 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
Python数据分析之pandas读取数据
2021/06/02 Python