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


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实例收集(20个)
Apr 21 Javascript
Javascript中获取出错代码所在文件及行数的代码
Sep 23 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
Javascript动画效果(1)
Oct 11 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
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 日期时间函数的高级应用技巧
2009/10/10 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
Python如何实现动态数组
2019/11/02 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
美国男士内衣品牌:Tommy John
2017/12/22 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
求职简历中的自我评价分享
2013/12/08 职场文书
中国文明网签名寄语
2014/01/18 职场文书
小学节能减排倡议书
2014/05/15 职场文书
商场促销活动总结
2014/07/10 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
法制教育讲座心得体会
2016/01/14 职场文书
高效课堂教学反思
2016/02/24 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
详解Vue的options
2021/05/15 Vue.js
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python