layui 手动验证表单问题

朋友推荐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 οnclick="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
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值