首页
所有分类
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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
Javascript中的变量使用说明
May 18 Javascript
js过滤数组重复元素的方法
Sep 05 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
javascript防抖函数debounce详解
Jun 11 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
Vue组件跨层级获取组件操作
Jul 27 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
re模块(2) cvzone(1) 计算机视觉(2) for(1) 无限迭代(1) 事件调度器(1) while(1) mediapipe(1) okenizer(1) 分词器(1)
You might like
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
javascript radio 联动效果
2009/03/04 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
D3.js实现简洁实用的动态仪表盘的示例
2018/04/04 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
罗马尼亚购物网站：Vivantis.ro
2019/07/20 全球购物
Dr. Martens马汀博士法国官网：马丁靴鼻祖
2020/01/15 全球购物
服装电子商务创业计划书
2014/01/30 职场文书
少先队入队活动方案
2014/02/08 职场文书
改进工作作风心得体会
2016/01/23 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android