登录
当前位置： 首页 > 编程笔记 >

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

景书
2023-03-14
本文向大家介绍封装好的一个万能检测表单的方法，包括了封装好的一个万能检测表单的方法的使用技巧和注意事项，需要的朋友参考一下

检测表单中的不能为空（.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;

        }

    });

});

以上代码就是封装过之后的万能检测表单的方法了，希望小伙伴们喜欢

 类似资料：
  • 推荐一个封装好的getElementsByClassName方法

    本文向大家介绍推荐一个封装好的getElementsByClassName方法，包括了推荐一个封装好的getElementsByClassName方法的使用技巧和注意事项，需要的朋友参考一下 我们知道，原生的JS给我们提供了getElementsByClassName方法，可以通过此方法获取到含有某指定class的节点集合，注意是集合，也就是此函数返回一个数组。 但是，IE却并不支持这个方法，但这

  • Java封装Integer.parseInt（）的好方法

    问题内容： 我有一个项目，我们经常在其中将String转换为int。当出现问题时（例如，不是数字，而是字母，等等），此方法将引发异常。但是，如果我必须到处都处理代码中的异常，这很快就会变得非常难看。我想将其放在一个方法中，但是，我不知道如何返回一个干净的值以表明转换出错。 在C ++中，我可以创建一个方法，该方法接受一个指向int的指针，并让该方法本身返回true或false。但是，据我所知，这在

  • java的jdbc简单封装方法

    本文向大家介绍java的jdbc简单封装方法，包括了java的jdbc简单封装方法的使用技巧和注意事项，需要的朋友参考一下 学习了jdbc一段时间后感觉自己写一个简单的封装来试试,于是参考的一些资料就写了一下不是多好,毕竟刚学也不太久 首先写配置文件:直接在src下建立一个db.properties文件然后写上内容 之后再写一个类代码如下 之后写主类代码如下 下面是两张图是建立db.propert

  • 自己封装的一个简单的倒计时功能实例

    本文向大家介绍自己封装的一个简单的倒计时功能实例，包括了自己封装的一个简单的倒计时功能实例的使用技巧和注意事项，需要的朋友参考一下 因为平常工作中很常用到该功能，所以就利用这次国庆假期，重新梳理与对原有代码进行改善，再集成一个常用的功能，最终封装出这个“简单倒计时”功能。 该倒计时方法具有以下该功能： 1. 根据指定日期与当前的电脑时间进行匹配 2. 通过指定一个数组参数，来设置在每一天内不同的时

  • Codeigniter检测表单post数据的方法

    本文向大家介绍Codeigniter检测表单post数据的方法，包括了Codeigniter检测表单post数据的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了Codeigniter检测表单post数据的方法。分享给大家供大家参考。具体如下： 希望本文所述对大家基于Codeigniter的php程序设计有所帮助。

  • 用js封装一个对cookie操作的方法

    本文向大家介绍用js封装一个对cookie操作的方法相关面试题，主要包含被问及用js封装一个对cookie操作的方法时的应答技巧和注意事项，需要的朋友参考一下

相关阅读

Codeigniter检测表单post数据的方法用js封装一个对cookie操作的方法WebService 的简单封装接口调用方法检测MySQL的表的故障的方法是否有检测过时的NFS挂载的好方法

相关文章

C#封装Python封装英方软件测试一面凉经（面试官挺好的）如何衡量一个算法的好坏？爱德万测试

相关问答

一个人如何写一个好的单元测试而不嘲笑一切？python - django写接口状态码封装，有更好的方案？Java：内部类访问对方的私有变量-封装外部API的好做法？spring - Springboot如何更好的封装Redisson的发布订阅？什么是最好的方法来打开一个冻集列表？

相关工具

封装的My97DatePicker日历nbnhhsh（能不能好好说话）speex语音压缩以及ogg封装FreeForm智能在线表单设计器立方体菜单

相关文档

好用的中文速查表Python 爱好者社区文章列表更好的 Java 中英文对照DIY 一个实用的 miniLAPP 服务器Vue 单元测试策略与实践
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.