m0_54928414 2021-12-19 22:09 采纳率: 79.4%
浏览 46
已结题

layui如何将表单数据提交到后台并进行校验

写一个spring的项目，在用layui编写登录页面时,如何实现以下功能。将表单里的数据全部提交到“/login”下并进行校验同时返回信息到前端。我怎么改都成功不了。

  • 写回答

2条回答 默认 最新

  • L丶cz 2021-12-22 17:31
    关注
    <!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta charset="utf-8"/>
    <title>用户登录</title>
    <link rel="stylesheet" href="assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="assets/css/login.css" media="all">
    <link rel="icon" href="assets/images/logo_2.png" sizes="32x32">
</head>

<body>
<div class="login-wrapper">
    <div class="login-body">
        <div class="layui-card">
            <div class="layui-card-header">
                <i class="layui-icon layui-icon-engine"></i>&nbsp;&nbsp;用户登录
            </div>
            <form class="layui-card-body layui-form layui-form-pane">
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
                    <div class="layui-input-block">
                        <input name="username" type="text" lay-verify="required" placeholder="账号"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                    <div class="layui-input-block">
                        <input name="password" type="password" lay-verify="required" placeholder="密码"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
                    <div class="layui-input-block">
                        <div class="layui-row inline-block">
                            <div class="layui-col-xs7">
                                <input name="validCode" style="width:170px" type="text" lay-verify="required"
                                       placeholder="验证码" class="layui-input">
                                <input name="deviceId" type="hidden"/>
                            </div>
                            <div class="layui-col-xs5" style="padding-left: 10px;">
                                <img class="login-captcha" src="#" style="display:none">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <button lay-filter="login-submit" class="layui-btn layui-btn-fluid" lay-submit>登 录</button>
                </div>
            </form>
        </div>
    </div>

    <div class="login-footer">
        <p>物联网水表综合平台</p>
    </div>
</div>

<script type="text/javascript" src="assets/libs/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="module/Math.uuid.js"></script>
<script>
    layui.config({
        base: 'module/'
    }).use(['form'], function () {
        var uuid = Math.uuid();
        var $ = layui.jquery;
        var form = layui.form;

        if (config.getToken()) {
            location.replace('./');
            return;
        }

        // 表单提交
        form.on('submit(login-submit)', function (obj) {
            var field = obj.field;

            layer.load(2);
            $.ajax({
                url: config.base_server + 'api-auth/oauth/token',
                data: field,
                type: 'POST',
                success: function (data) {
                    if (data.access_token) {
                        config.putToken(data);
                        layer.msg('登录成功', {icon: 1, time: 500}, function () {
                            location.replace('./');
                        });
                    } else {
                        layer.closeAll('loading');
                        layer.msg('登录失败，请重试', {icon: 5, time: 500});
                    }
                },
                error: function (xhr) {
                    layer.closeAll('loading');
                    var error;
                    var error_msg;
                    if (xhr.status === 400) {
                        error = JSON.parse(xhr.responseText);
                        error_msg = error.error_description ? error.error_description : error.resp_msg;

                        layer.msg(error_msg ? error_msg : xhr.statusText, {icon: 5, time: 500});
                    } else if (xhr.status === 401) {
                        error = JSON.parse(xhr.responseText);
                        error_msg = error.error_description ? error.error_description : error.resp_msg;

                        layer.msg(error_msg ? error_msg : xhr.statusText, {icon: 5, time: 500});
                    } else if (xhr.status === 500) {
                        layer.msg('服务器异常,请联系管理员', {icon: 5, time: 500});
                    } else if (xhr.status === 0) {
                        layer.msg('网关异常,请联系管理员', {icon: 5, time: 900});
                    }
                }
            });
            return false; //阻止表单跳转
        });

        // 图形验证码
        $('.login-captcha').attr("src", config.base_server + "api-auth/validata/code/" + uuid).attr("style", "")
            .click(function () {
                this.src = this.src + '?timestamp=' + (new Date).getTime();
            });
    });
</script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 2月17日
  • 已采纳回答 2月9日
  • 创建了问题 12月19日

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器