首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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;

        }

    });

});

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

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用JavaScript页面不刷新时全选择，全删除（GridView）
Apr 14 Javascript
js 学习笔记（三）
Dec 29 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
JavaScript的==运算详解
Jul 20 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
js实现淘宝首页的banner栏效果
Nov 26 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
日本购物网站(72) 中国购物网站(172) 西班牙购物网站(115) 瑞士购物网站(28) 英国购物网站(954) 巴西购物网站(71) 德国购物网站(227) 新加坡购物网站(41) 加拿大购物网站(185) 韩国购物网站(27)
You might like
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
php时间计算相关问题小结
2016/05/09 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
JavaScript 学习笔记（七）字符串的连接
2009/12/31 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
python获取元素在数组中索引号的方法
2015/07/15 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
python3 使用traceback定位异常实例
2020/03/09 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
Urban Outfitters英国官网：美国平价服饰品牌
2016/11/25 全球购物
DJI美国：消费类无人机领域的领导者
2018/04/27 全球购物
在对linux系统分区进行格式化时需要对磁盘簇（或i节点密度）的大小进行选择，请说明选择的原则
2012/11/24 面试题
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
网络编辑求职信
2014/04/30 职场文书
校园主题婚礼活动策划方案
2014/09/15 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
2014年食堂工作总结
2014/11/20 职场文书
思品教学工作总结
2015/08/10 职场文书