javaweb(js)实现登录注册案例(一)

最新推荐文章于 2024-09-03 14:47:13 发布

Asuka-Rimuru

最新推荐文章于 2024-09-03 14:47:13 发布

阅读量5.4k

点赞数 6

文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/hy123154/article/details/127310962

版权

本文介绍了使用JavaScript在JavaWeb中实现登录注册功能的第一部分。主要内容包括：编辑JSP页面，添加CSS样式，预览页面，编写JS代码实现登录注册切换，以及输入框的实时验证。通过监听change事件进行非空和正则验证，确保用户输入的有效性。

摘要由CSDN通过智能技术生成

首先编辑jsp的页面代码

<body id="body">
<div id="banner">
</div>
<header>
    <div id="top">
        <div id="logo">
            <a href="" title="ayaya论坛网站-(=￣ω￣=)-">
                <div id="logo_box">
                    <div id="logo_img1"></div>
                    <div id="logo_img2"></div>
                </div>
            </a>
        </div>
    </div>
</header>
<div id="main">
    <div id="login_ui" class="lr">
        <div class="lr_top">
            <div class="lr_text">
                <img src="${pageContext.request.contextPath}/image/logo/top_logo2.png" class="lr_logo">
            </div>
        </div>
        <div id="login_handoff" class="handoff" onclick="loginHandOff()">
            <span class="handoff_text">注册</span>
        </div>
        <div class="lr_box">
            <form id="login_form">
                <input type="text" name="action" value="login" style="display: none">
                <div id="login_input_superBox">
                    <div id="login_input_box1" class="login_input_box">
                        <span id="login_username_text">用户名</span>
                        <input type="text" id="login_username_input" name="userName" autocomplete="off">
                        <span class="login_errors_message"></span>
                    </div>
                    <div id="login_input_box2" class="login_input_box">
                        <span id="login_password_text">密&emsp;码</span>
                        <input type="password" id="login_password_input" name="passWord">
                        <span class="login_errors_message"></span>
                    </div>
                    <label id="login_submit" for="login_submit_input">登录</label>
                </div>
                <input type="button" style="display: none" id="login_submit_input">
            </form>
        </div>
    </div>
    <div id="register_ui" class="lr">
        <div class="lr_top">
            <div class="lr_text">
                <img src="${pageContext.request.contextPath}/image/logo/top_logo2.png" class="lr_logo">
            </div>
        </div>
        <div id="register_handoff" class="handoff" onclick="registerHandOff()">
            <span class="handoff_text">登录</span>
        </div>
        <div class="lr_box">
            <form id="register_form">
                <input type="text" name="action" value="register" style="display: none">
                <div id="register_input_superBox">
                    <div id="register_input_box1" class="register_input_box">
                        <span id="register_username_text">用户名</span>
                        <input type="text" id="register_username_input" name="userName" autocomplete="off">
                        <span class="register_errors_message"></span>
                    </div>
                    <div id="register_input_box2" class="register_input_box">
                        <span id="register_password_text">密&emsp;码</span>
                        <input type="password" id="register_password_input" name="passWor