基础Javaweb项目的html5代码，实现基本增删改查功能

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
    <link rel="icon" th:href="@{/asserts/img/favicon.ico}">
    <link rel="stylesheet" th:href="@{/asserts/css/style.css}">
</head>
<body>

<div class="cotn_principal">
    <div class="cont_centrar">
        <div class="cont_login">
            <div class="cont_info_log_sign_up">
                <div class="col_md_login">
                    <div class="cont_ba_opcitiy">
                        <h2>LOGIN</h2>

                        <span th:if="${session.info == '0'}" style="color:red;font-weight: bolder">请先登录!</span>

                        <button class="btn_login" onClick="cambiar_login()">登录</button>
                    </div>
                </div>
                <div class="col_md_sign_up">
                    <div class="cont_ba_opcitiy">
                        <h2>SIGN UP</h2>
                        <button class="btn_sign_up" onClick="cambiar_sign_up()">注册</button>
                    </div>
                </div>
            </div>
            <div class="cont_back_info">
                <div class="cont_img_back_grey"><img th:src="@{/asserts/img/po.jpg}" alt=""/></div>
            </div>
            <div class="cont_forms">
                <div class="cont_img_back_"><img th:src="@{/asserts/img/po.jpg}" alt=""/></div>
                <div class="cont_form_login"><a href="#" onClick="ocultar_login_sign_up()"><i class="material-icons">&#xE5C4;</i></a>
                    <h2>LOGIN</h2>
                    <span id="loginHint" style="color:red;font-weight: bolder">[[${msg}]]</span>
                    <input type="text" name="username" id="ln" placeholder="Username" required/>
                    <input type="password" name="password" id="lp" placeholder="Password"/>
                    <button class="btn_login" id="loginBtn" type="button">登录</button>
                </div>
                <div class="cont_form_sign_up"><a href="#" onClick="ocultar_login_sign_up()"><i class="material-icons">&#xE5C4;</i></a>
                    <h2>SIGN UP</h2>
                    <span id="userHint" style="color:red;font-weight: bolder"></span>
                    <form id="regForm" th:action="@{/user/register}" th:method="post">
                        <input type="text" id="rn" placeholder="Username" name="username" required/>
                        <input type="password" id="rp1" placeholder="Password" name="password" required/>
                        <input type="password" id="rp2" placeholder="Confirm Password" required/>
                        <button class="btn_sign_up" id="regBtn" type="submit">注册</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/asserts/js/index.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script th:src="@{/asserts/js/layer/layer.js}"></script>
<script>
    $(function () {
        $("#loginBtn").click(function () {
            var ln = $("#ln").val();
            var lp = $("#lp").val();
            $.post("/crm/user/login", {username: ln, password: lp}, function (data) {
                if (data == "1") {
                    $("#loginHint").html("用户名或者密码有误!");
                }
                if (data == "0") {
                    window.location = "customer/list";
                }
            });
        });

        $("#regForm").submit(function () {
            layer.msg("注册成功!", {
                time: 2000
            });
        });

        //验证用户名是否被注册
        $("#rn").blur(function () {
            //AJAX请求
            var username = $(this).val();
            $.get("/crm/user/checkUser?username=" + username, function (data) {
                if (data == "1") {
                    $("#rn").css("border", "1px solid red");
                    $("#userHint").text("该用户已经被注册!");
                    $("#regBtn").attr("disabled", true);
                    $("#regBtn").css("background-color", "#ccc");
                    $("#rn").val("").focus();
                } else {
                    $("#rn").css("border", "none");
                    $("#userHint").text("");
                    $("#regBtn").attr("disabled", false);
                    $("#regBtn").css("background-color", "#f44336");
                }
            });
        });

        //验证两次密码输入必须一致
        $("#rp1").blur(function () {
            var rp2 = $("#rp2").val();
            if (rp2 != '') {
                var rp1 = $("#rp1").val();
                var rp2 = $("#rp2").val();
                if (rp1 != rp2) {
                    //显示提示
                    $("#userHint").text("两次密码输入不一致!");
                    //禁用按钮
                    $("#regBtn").attr("disabled", true);
                    //修改按钮样式
                    $("#regBtn").css("background-color", "#ccc");
                    $("#rp1").css("border-color", "red");
                    $("#rp2").css("border-color", "red");
                    $("#rp1").val("").focus();
                    $("#rp2").val("");
                } else {
                    $("#userHint").text("");
                    $("#regBtn").attr("disabled", false);
                    $("#regBtn").css("background-color", "#f44336");
                }
            }
        });
        $("#rp2").blur(function () {
            var rp1 = $("#rp1").val();
            var rp2 = $("#rp2").val();
            if (rp1 != rp2) {
                //显示提示
                $("#userHint").text("两次密码输入不一致!");
                //禁用按钮
                $("#regBtn").attr("disabled", true);
                //修改按钮样式
                $("#regBtn").css("background-color", "#ccc");
                $("#rp1").css("border-color", "red");
                $("#rp2").css("border-color", "red");
                $("#rp1").val("").focus();
                $("#rp2").val("");
            } else {
                $("#userHint").text("");
                $("#regBtn").attr("disabled", false);
                $("#regBtn").css("background-color", "#f44336");
            }
        });
    });
</script>
</body>
</html>
基础Javaweb项目的html5代码，实现基本增删改查功能

猜你喜欢
