layui 手动验证表单问题

最新推荐文章于 2022-06-11 00:26:10 发布

TOP_Y

最新推荐文章于 2022-06-11 00:26:10 发布

阅读量6.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： layui

本文链接：https://blog.youkuaiyun.com/TOP_Y/article/details/70139854

layui 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在layui框架中实现表单验证与AJAX提交相结合的方法，通过使用form.on('submit(*)'...)来触发自定义的AJAX提交函数，确保验证规则正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

朋友推荐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>

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

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