layui 手动验证表单问题

来源：互联网发布：apriori算法例题编辑：程序博客网时间：2024/05/20 13:38

朋友推荐layui这个前端控件还不错，这几天尝试了一下，爬坑中

关于手动验证表单这一功能我的问题是这样的

在上图中，弹出层中是我引用的另一个页面，需要做ajax提交，但是用正常的ajax提交，layui的表单验证功能就无法使用了，下面是我ajax提交代码

function saveOrUpdate(){            $.ajax({                type: "POST",                url: "${pageContext.request.contextPath}",                data:$('#from').序列化那个单词,                dataType: "json",                success: function(data){                    if(data.success) {                        layer.msg(data.msg,{                            shade: [0.1,'#fff'],                            offset: '100px'                        },function(){                            parent.window.location.reload(); // 父页面刷新                        });                    }else{                        layer.msg(data.msg,{                            shade: [0.1,'#fff'],                            offset: '100px'                        });                    }                },                error:function () {                    layer.msg("请求出错",{                        offset: '100px'                    });                }        });    }

开始我是这样提交的，发现无法使用验证方法，昨天下午查了半天资料，今天上午来，看api的时候看到一个东西

form.on('submit(*)', function(data){  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。});

就是这个东西，于是我换了个想法，在页面上仍然用

<button lay-submit lay-filter="*">提交</button>

然后在from的过滤时候调用ajax提交

form.on('submit(*)', function(data){            saveOrUpdate(data.field);            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。        });

而data里面有dom对象，form对象，和表单字段，相信已经足够ajax提交的需求了

下面上完整代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head>    <title>用户编辑页</title>    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugin/layui/css/layui.css"></head><body><div class="edit-view">    <form id="editFrom" class="layui-form layui-form-pane1" style="width: 360px; margin-top: 40px;">        <div class="layui-form-item">            <label class="layui-form-label">用户账号</label>            <div class="layui-input-block">                <input id="userAccount" type="text" name="userAccount" lay-verify="required" autocomplete="off" placeholder="请输入账号" class="layui-input" value="${user.userAccount}">                <input id="id" type="hidden" name="id" value="${user.id}">            </div>        </div>        <div class="layui-form-item">            <label class="layui-form-label">用户名</label>            <div class="layui-input-block">                <input id="userName" type="text" name="userName" lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input" value="${user.userName}">            </div>        </div>        <div class="layui-form-item">            <label class="layui-form-label">密码</label>            <div class="layui-input-block">                <input type="password" name="passWord" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">            </div>        </div>        <div class="layui-form-item">            <div class="layui-input-block">                <button class="layui-btn" lay-submit lay-filter="*">保存</button>               <%-- <input onclick="saveOrUpdate()" class="layui-btn" value="保存">--%>            </div>        </div>    </form></div><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.0.js" ></script><script src="${pageContext.request.contextPath}/plugin/layui/layui.js" charset="utf-8"></script><script>    layui.use(['form','layer'], function(){        var form = layui.form(),        layer = layui.layer;        form.on('submit(*)', function(data){            saveOrUpdate(data.field);            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。        });    });    function saveOrUpdate(field){            $.ajax({                type: "POST",                url: "${pageContext.request.contextPath}/user/saveOrUpdate",                data:field,                dataType: "json",                success: function(data){                    if(data.success) {                        layer.msg(data.msg,{                            shade: [0.1,'#fff'],                            offset: '100px'                        },function(){                            parent.window.location.reload(); // 父页面刷新                        });                    }else{                        layer.msg(data.msg,{                            shade: [0.1,'#fff'],                            offset: '100px'                        });                    }                },                error:function () {                    layer.msg("请求出错",{                        offset: '100px'                    });                }        });    }</script></body></html>

希望对遇到同样问题的人有帮助

生命不息，折腾不止，与君共勉

0 0