SSM+Layui注册验证用户名是否重复

原创 于 2021-05-19 00:27:37 发布 · 1.2k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个基于LayUI框架的漫画平台注册页面的设计与实现过程，包括前端页面布局、表单验证及后端接口开发等内容。

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

1.前端页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册 - layuiAdmin</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/static/layui/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctx}/static/layui/style/login.css" media="all">
    <script src="${ctx}/static/layui/layui.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="${ctx}/static/js/common.js"></script>
    <script>
        var ctx = "${ctx}";  //全局js项目路径
    </script>
</head>
<body>


<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
    <div class="layadmin-user-login-main">
        <div class="layadmin-user-login-box layadmin-user-login-header">
            <h2>漫画SHOW</h2>
            <p> 漫画SHOW--PC端注册页面</p>
        </div>
        <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
            <form id="regForm" action="#" onsubmit="return false;">
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-name"></label>
                    <input type="text" name="name" id="LAY-user-login-name" lay-verify="required" placeholder="用户名"
                           class="layui-input"><span id="msg"></span>
                </div>

                <div class="layui-form-item ">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
                    <div class="layui-input-block" style="width: 335px;margin-left: 0px">
                        <select name="sex" id="sex" class="layui-select" lay-verify="required" >
                            <option value=""  >请选择性别</option>
                            <option value="男"  >男</option>
                            <option value="女" >女</option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-password"
                           for="LAY-user-login-password"></label>
                    <input type="password" name="password" id="LAY-user-login-password" lay-verify="pass"
                           placeholder="密码"
                           class="layui-input">
                </div>


                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-cellphone"
                           for="LAY-user-login-cellphone"></label>
                    <input type="text" name="phone" id="LAY-user-login-cellphone" lay-verify="phone"
                           placeholder="手机"
                           class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layadmin-user-login-icon layui-icon layui-icon-cellphone"
                           for="LAY-user-login-email"></label>
                    <input type="text" name="email" id="LAY-user-login-email" lay-verify="email" placeholder="邮箱"
                           class="layui-input">
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <label class="layadmin-user-login-icon layui-icon layui-icon-user"
                                   for="picurl"></label>
                            <input id="myfile" type="file" name="myfile" style="display: none;"
                                   onchange="uploadFileUtil('myfile','picurl')">
                            <input type="text" name="picurl" id="picurl" lay-verify="required"
                                   placeholder="请选择用户头像" class="layui-input">
                        </div>
                        <div class="layui-col-xs5">
                            <div style="margin-left: 10px;">
                                  <span onclick="uploadFileUtilClick('myfile')" class="layui-btn"><i
                                          class="layui-icon"></i>上传头像&nbsp;&nbsp;</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-xs7">
                            <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"
                                   for="LAY-user-login-vercode"></label>
                            <input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required"
                                   placeholder="验证码" class="layui-input">
                        </div>
                        <div class="layui-col-xs5">
                            <div style="margin-left: 10px;">
                                <img src="${ctx}/code" class="layadmin-user-login-codeimg"
                                     id="LAY-user-get-vercode" onclick="this.src=this.src+'?'">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <input type="checkbox" name="agreement" lay-skin="primary" title="同意用户协议" checked>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-reg-submit">注 册</button>
                </div>
                <div class="layui-trans layui-form-item layadmin-user-login-other">
                    <label>社交账号注册</label>
                    <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
                    <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
                    <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>

                    <a href="${ctx}/login" class="layadmin-user-jump-change layadmin-link layui-hide-xs">用已有帐号登入</a>
                   </div>
            </form>
        </div>
    </div>

    <div class="layui-trans layadmin-user-login-footer">
        <div class="layui-main">
            <h4>© 2021 漫画SHOW 版权所有</h4>
            <p>
                漫画SHOW PC端页面
            </p>
        </div>
    </div>
</div>

<script>
    var ctx = "${ctx}";
    var flag=false;
  

    layui.config({
        base: '' //静态资源所在路径
    }).extend({}).use(['form'], function () {
        var $ = layui.$
            , setter = layui.setter
            , admin = layui.admin
            , form = layui.form
            , router = layui.router()
            , search = router.search;

        form.render();

        //用户名校验
        $("#LAY-user-login-name").blur(function(){
            // alert(222)
            var name = $("#LAY-user-login-name").val();
            $("#msg").css("display","none");
            // alert(name)
            if(name==""||name==null){
                $("#msg").html("请输入用户名！").css("display","block");
            }else {
                $.ajax({
                    url:ctx+"/pc/registerTest",
                    type:"POST",
                    async:false,
                    data:$("#regForm").serialize(), //表单数据序列化, 可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端。
                    success:function(result){
                        if(result.code == 0){
                            $("#msg").css("color","red");
                            $("#msg").html("用户名已存在").css("display","block");
                            // $("#LAY-user-login-name").val("");

                        }else {
                            $("#msg").css("color","green");
                            $("#msg").html("用户名可以使用！").css("display","block");
                            flag=true;

                        }
                    },
                    error:function(e){
                        alert("请求出错！");
                    }
                });
            }
        });


        //提交
            form.on('submit(LAY-user-reg-submit)', function (obj) {
                //表单数据formData
                if (flag){
                var regFrom = obj.field;
                $.post("${ctx}/pc/registerSubmit", regFrom, function (result) {
                    if (result.code == 0) {
                        layer.msg('恭喜你，注册成功，到登录页面进行登录', {
                            offset: '15px'
                            , icon: 1
                        }, function () {
                            location.href = "${ctx}/login";
                        });
                    } else {
                        layer.alert(result.msg);
                    }
                }, "JSON");
                }
            });


    });



</script>

<script type="text/javascript">


</script>


</body>
</html>

2.后台代码

    @ResponseBody
    @RequestMapping("pc/registerTest")
    public ResultUtil registerTest(HttpServletRequest request,String name) {
        HttpSession session = request.getSession();
        Map map = new HashMap();
        map.put("name", name);
        List<Userinfo> beanList = userinfoMapper.selectAll(map);
        if (beanList.size() > 0) {
            return ResultUtil.ok("该用户名可以使用！");
        }else {
            return ResultUtil.error("用户名已存在！");
        }

    }

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值