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

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

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

(0)

相关推荐

  • 一个检测表单数据的JavaScript实例

    一个检测表单数据的JavaScript实例,很简单,很实用,感兴趣的朋友可以看看 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-检测表单数据</title> <style> [role

  • 强效、方便的表单通用检测JS 不错

    // 表单通用检测JS by www.it2048.com 整理/制作 H.Q.J 2007/1/10 //自定义属性解释(IE支持): //ii_chname:表示该数据的中文名称 //ii_minsize:表示允许输入的最小长度,单位字节 //ii_maxsize:表示允许输入的最大长度,单位字节 //ii_type:输入的数据类型 //ii_null:表示输入值是否允许为空.为yes时允许为空. //ii_compare:比交是否与某项(ID)值相同 function chkRadio(o

  • 离开页面时检测表单元素是否被修改,提示保存的js代码

    复制代码 代码如下: window.onbeforeunload = function() { if(is_form_changed()) { return "您的修改内容还没有保存,您确定离开吗?"; } } function is_form_changed() { var t_save = jQuery("#t_save"); //检测页面是否要保存按钮 if(t_save.length>0) { //检测到保存按钮,继续检测元素是否修改 var is_c

  • jquery自动将form表单封装成json的具体实现

    前端页面: 复制代码 代码如下: <span style="font-size:14px;"> <form action="" method="post" id="tf"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr

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

    检测表单中的不能为空(.notnull)的验证  作用:一对form标签下有多个(包括一个)表单需要提交时,使用js准确的判断当前按钮对那些元素做判断  用法:在form标签下 找到当前 表单的容器 给予class="form",当前表单的提交按钮给予 class="check"  需要验证为空的元素给予class="notnull" nullmsg="xx不能为空!"提示,需要进行逻辑判断的表单给予class="n

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

    本文实例讲述了Codeigniter检测表单post数据的方法.分享给大家供大家参考.具体如下: $name = $this->input->post(' name' ) ; $email = $this- >input->post( ' email' ) ; $subj ect = $this->input->post( ' subject' ) ; $message = $this->input->post( ' message' ) ; if(empt

  • JQuery validate 验证一个单独的表单元素实例

    前提:已引入JQuery validate插件 function validateOneElement() { //验证id="form1"的表单中id="elementId"的表单元素 $("#form1").validate().element($("#elementId")) } 以上这篇JQuery validate 验证一个单独的表单元素实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们

  • jquery实现一个简单的表单验证实例

    表单验证在网站开发过程中经常遇到,我们可以使用服务器端语言验证,也可以使用客户端语言来验证.本文章向大家介绍jquery客户端验证表单的一个简单实例.实例仅作参考. <body> <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <!-- 为每个

  • asp.net动态生成HTML表单的方法

    本文实例讲述了asp.net动态生成HTML表单的方法.分享给大家供大家参考,具体如下: 经测试System.Web.UI.HtmlControls下的HtmlForm类,也就是我们在传统的asp.net中使用的Form表单对象,不适合动态生成Html代码. 于是自定义了一个简单的HtmlForm容器控件,只需要几行代码.看来Asp.net在封装Html元素方面还是很有优势的,微软为我们定义了大量的基础结构,很容易扩展使用. public class myHtmlForm:HtmlContain

  • ThinkPHP防止重复提交表单的方法实例分析

    本文实例总结分析了ThinkPHP防止重复提交表单的方法.分享给大家供大家参考,具体如下: 为什么会有表单重复的坑 在开发中,如果一个新增或修改的表单,在后台完成数据库操作后我们设定的不是跳转到其他页面,还是返回本页面,这时点击浏览器的后退再提交或刷新页面,会导致form表单重复提交,即这条记录会被增加或修改两次. 导致表单重复提交的原因是:第一次提交的表单会被缓存到内存中,直到页面下次提交或页面关闭或转向其他页面时才消失.在自调用返回时,内存中的数据依然在,这时页面中的判断提交的代码依然可以检

  • vue构建动态表单的方法示例

    概述 后台管理系统里面有非常多的表单需求,我们希望能够通过写一个json格式的数据,通过vue的循环动态地去渲染动态表单.并且能够在外部得到渲染出来的表单的数据,可以对表单进行重置操作.我结合element ui的控件的下拉框,输入框,时间选择控件和vue-treeselect,做了一个动态表单. v-model的理解 先简单讲一下vue-model是怎么玩的.其实vue-model相当于给表单元素传递一个value,外部监听input事件.所以我们自己封装表单组件的时候也是可以传递一个valu

  • 用JavaScrip正则表达式验证form表单的方法

    document:标签之间 location:url history:前进后退 <html> <head> <script type="text/javascript"> function show() { //弹出一个提示框 window.alert("hh"); } //将show方法绑定到按钮上 window.onload=function() { //定位到按钮 var buttonElement=document.for

  • HTML页面禁用Enter键自动提交表单的方法

    在HTML页里面由于使用了form,常常需要禁用enter提交表单.因为内容页或者母版页自身有如果有type="submit"的button,当textbox聚焦时,按下enter都会触发表单的默认提交(不论是IE还是firefox),于是需要在onkeydown中监听用户的按键.实际测试,IE8中导致表单提交的不确定因素太多,点击表单的table中的td都会触发表单提交,而firefox则不会:于是在ie和ff中禁用表单提交需要不同的思路. 对于IE: 只有当事件源是TEXTAREA

随机推荐