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

前端技术 2023/09/02 JavaScript

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

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

本文地址:https://www.stayed.cn/item/3743

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。