form表单验证(使用ajax和ajaxSubmit)

form表单验证(使用ajax和ajaxSubmit)

本博客由本人做项目时碰到的bug,解决后所写为了警示自己,同时希望能对别人有所帮助:

引入JQuery_form.js

<script type="text/javascript" src="${ctxStatic}/jquery/jquery.form.js">script>

我之前是直接使用ajaxSubmit但是界面一直无法实现,在浏览器F12后,报出的错误说ajaxSubmit不是方法,去度娘问了问,原来是我缺少这个js文件,只要引入就可以使用ajaxSubmit了。

项目流程

因为篇幅的缘故我就只挑主要的讲解了,我做的是一个form表单,其中包含了3个gird选择框(由于公司项目gird选择框都是封装好的就不做说明了,只是讲一讲思路)首先其中第一个gird我就叫g1,其他以此类推,首先当g2选择出一条数据后,会将这条数据中其中一个属性回传给input标签中显示,我要将g2的值获取到传给g3并作为g3的一个从数据库取数据的条件之一,从数据库获取g3的数据;当我在浏览器完成了数据的填写工作后,我点击提交,注意此时不对button标签设置onclick点击事件,因为使用了validate()进行表单的验证,在其中使用ajaxSubmit作为事件,去寻找controller层中相应的方法……忘记说了,在点击时首先会触发ajax寻找controller层先去做一次校验,校验g1选中的值是否已经提交过,因为数据表中有一条属性为status记录提交状态,所以要校验的就是status属性是否为1。

校验状态

                var shoporderNo = $("#shoporderNoName").val();
                var isLssued = true;
            $.ajax({
                    type:"post",
                    url:"*****/isLssued?shoporderNo="+shoporderNo,
                    cache : false,
                    async : false,
                    dataType : "json",
                    success : function(obj) {
                        isLssued = obj;
                    }
                });
                if (isLssued) {
                    layer.msg("工单已下达,无需重复下达!!!", {
                        icon : 5,
                        shift : 6
                    });

这是前端写在validate中的ajax,首先将从g1获取的属性通过url传给后台controller,会通过传回来的值访问访问数据库获取数据存储在list中,(我这里并不是直接在controller层访问数据库,都知道所有的业务逻辑都是写在service层中,再调用dao层方法,dao层方法对应着mybatis中的映射文件……)判断list是否为空,如果是则return false;否则return true;

ajaxSubmit

       $(form).ajaxSubmit({// 验证新增是否成功
                    type : "post",
                    dataType : "json",
                    success : function(data) {
                        var rs = data;
                        if (rs.status == true) {
                            if (CommnUtil.notNull(rs.score)) {
                                layer.alert('恭喜你,添加成功,本次操作得分:'+rs.score+",是否关闭窗口?", {
                                    skin: 'layui-layer-molv' //样式类名  自定义样式
                                    ,closeBtn: 1    // 是否显示关闭按钮
                                    ,anim: 1 //动画类型
                                    ,btn: ['关闭'] //按钮
                                    ,icon: 6    // icon
                                    ,yes:function(){
                                           window.parent.location.reload(); //刷新父页面
                                            var index = parent.layer.getFrameIndex(window.name);
                                            parent.layer.close(index);//关闭自身页面
                                        return false;
                                    }});

                            }else {
                                layer.msg('下达成功', {
                                    icon : 1
                                });
                            }
                             $(this).resetForm();
                        } else {
                            layer.msg("下达失败", {
                                icon : 5,
                                shift : 6
                            });
                        }
                    }
                });

首先说明CommnUtil是我自定义的,写在JS中。ajaxSubmit用法几乎和ajax一样,其中内容不再过多详述,之所以没有url是因为ajaxSubmit会直接寻找到form中的action属性……至于g2值传给g3,就不再粘贴代码了,只是讲思路。
当我g2选择一条数据后,显示在input中的值,身处同一JSP中的g3是可以获取到的, $(“#**“).val();再将值传给后台,后端通过这个条件就可以获取对应的数据了。

完整代码

$(document).ready(function() {
        validateForm = $("#inputForm").validate({
            submitHandler: function(form){
                var shoporderNo = $("#**").val();
                var isLssued = true;
                $.ajax({
                    type:"post",
                    url:"****?shoporderNo="+shoporderNo,
                    cache : false,
                    async : false,
                    dataType : "json",
                    success : function(obj) {
                        isLssued = obj;
                    }
                });
                if (isLssued) {
                    layer.msg("工单已下达,无需重复下达!!!", {
                        icon : 5,
                        shift : 6
                    });

                    return;
                }

                $(form).ajaxSubmit({// 验证新增是否成功
                    type : "post",
                    dataType : "json",
                    success : function(data) {
                        var rs = data;
                        if (rs.status == true) {
                            if (CommnUtil.notNull(rs.score)) {
                                layer.alert('恭喜你,添加成功,本次操作得分:'+rs.score+",是否关闭窗口?", {
                                    skin: 'layui-layer-molv' //样式类名  自定义样式
                                    ,closeBtn: 1    // 是否显示关闭按钮
                                    ,anim: 1 //动画类型
                                    ,btn: ['关闭'] //按钮
                                    ,icon: 6    // icon
                                    ,yes:function(){
                                           window.parent.location.reload(); //刷新父页面
                                            var index = parent.layer.getFrameIndex(window.name);
                                            parent.layer.close(index);//关闭自身页面
                                        return false;
                                    }});

                            }else {
                                layer.msg('下达成功', {
                                    icon : 1
                                });
                            }
                             $(this).resetForm();
                        } else {
                            layer.msg("下达失败", {
                                icon : 5,
                                shift : 6
                            });
                        }
                    }
                });

            },
            errorContainer: "#messageBox",
            errorPlacement: function(error, element) {
                $("#messageBox").text("输入有误,请先更正。");
                if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
                    error.appendTo(element.parent().parent());
                } else {
                    error.insertAfter(element);
                }
            }
        });
    });

end

此博客全由自己在开发时所碰到的bug有感而发,如有雷同,认识一下,哈哈,如果有错误希望大神指出来,在开发这条道路上,只有不断更新自己的技术,不断提升,不断修正才会勇往直前,希望不吝赐教。

你可能感兴趣的:(IE-MES)