javaweb(js) implementation of login registration case (1)

First edit the jsp page code

<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="passWord">
                        <span class="register_errors_message"></span>
                    </div>
                    <div id="register_input_box3" class="register_input_box">
                        <span id="register_confirmThePassword_text">确认密码</span>
                        <input type="password" id="register_confirmThePassword_input" name="confirmThePassword">
                        <span class="register_errors_message"></span>
                    </div>
                    <div id="register_input_box4" class="register_input_box">
                        <span id="register_secretProtection_text">密保</span>
                        <input type="text" id="register_secretProtection_input" name="encrypted">
                        <span class="register_errors_message"></span>
                    </div>
                    <label id="register_submit" for="register_submit_input">注册</label>
                </div>
                <input type="button" style="display: none" id="register_submit_input">
            </form>
            <form id="code">
                <input type="text" name="action" value="registerCode" style="display: none">
                <input id="code_input" type="text" name="registerCode">
            </form>
        </div>
    </div>
</div>
</body>

Then add css styles to the page

* {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration:none;
}

body {
    font-family: "STHeiti Light [STXihei]";
    scroll-behavior: smooth;
}

/*弹窗*/
.popup {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.popup_box {
    width: 400px;
    height: 250px;
    background: white;
    border-radius: 4px;
}

.popup_title {
    width: 100%;
    height: 65px;
    line-height: 65px;
    background: #000000;
    text-align: center;
    font-size: 32px;
    color: white;
    border-radius: 4px;
    user-select: none;
}

.popup_text {
    width: 100%;
    height: 32px;
    line-height: 16px;
    margin: 52px 0;
    text-align: center;
    font-size: 16px;
    user-select: none;
}

.popup_input {
    width: 76px;
    height: 36px;
    line-height: 36px;
    background: #00a0e9;
    margin: 0 12px;
    text-align: center;
    float: left;
    border: 1px solid #00a0e9;
    color: white;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
}

.popup_input:hover {
    background: #000000;
    border: 1px solid #00a0e9;
}

.popup_Input_box{
    width: 100px;
    height: 30px;
    position: relative;
    float: left;
    top: -50px;
    left: 38%;
    margin-left: -2px;
    padding: 0 24px;
    font-size: 14px;
}

.popup_Input_box:focus{
    outline: none;
}

#code{
    display: none;
}

#Prompt_pop_up_box1{
    width: 200px;
    height: 70px;
    background: white;
    position: relative;
    top: -70px;
    opacity: 0;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 5px;
    z-index: 200;
    transition: all 0.3s;
}

#Prompt_pop_up_box1_img_box{
    width: fit-content;
    height: fit-content;
    margin: 8px auto;
}

#Prompt_pop_up_box1_img{
    width: 25px;
    height: 25px;
    user-select: none;
}

#Prompt_pop_up_box1_text{
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    user-select: none;
    font-size: 12px;
}

#banner {
    width: 100%;
    height: 100%;
    background: url("../image/main-banner.jpg") no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
}

#banner{
    width: 100%;
    height: 100%;
    background: url("../image/main-banner.jpg") no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
}

header {
    height: 80px;
}

#top {
    width: 1719px;
    min-width: 1138px;
    height: 80px;
    background: rgba(33, 33, 33);
    position: fixed;
    z-index: 100;
}

#logo {
    width: 300px;
    height: 80px;
    line-height: 80px;
    position: absolute;
    text-align: center;
    color: white;
    font-size: 30px;
    user-select: none;
}

#logo_img1{
    background: url("../image/logo/top_logo1.png") no-repeat;
    background-size: 74px;
    width: 64px;
    height: 100%;
    position: absolute;
}

#logo_box{
    width: 138px;
    height: 100%;
    position: absolute;
    left: 50%;
    margin-left: -69px;
    cursor: pointer;
}

#logo_img2{
    background: url("../image/logo/top_logo2.png") 0 28px no-repeat;
    background-size: 74px;
    width: 74px;
    height: 100%;
    position: absolute;
    right: 0;
}

#main{
    width: 700px;
    height: 450px;
    position: absolute;
    /*top: 50%;*/
    margin-top: 160px;
    left: 50%;
    margin-left: -350px;
    overflow: hidden;
}

.lr{
    width: 100%;
    height: 100%;
}

.lr_logo{
    width: 16%;
    height: 50%;
    /*object-fit: cover;*/
    margin: 20px 0 ;
}

#login_ui{
    background: white;
    position: absolute;
}

#register_ui{
    background: white;
    position: absolute;
}

.handoff{
    width: 70px;
    height: 70px;
    position: absolute;
    top: 0;
    left: 0;
    background: #00a0e9;
    border-bottom-right-radius: 100px;
    overflow: hidden;
    transition: all 0.3s;
}

.handoff:hover{
    border-bottom-right-radius: 100px;
    cursor: pointer;
    background: #3bc3f8;
    box-shadow: #3bc3f8 0 0 15px 0;
}

.lr_top{
    width: 100%;
    height: 70px;
    background: rgb(33, 33, 33);
}

.lr_text{
    color: white;
    font-size: 40px;
    text-align: center;
    line-height: 70px;
    margin: 0 auto;
    user-select: none;
}

.handoff_text{
    color: white;
    position: relative;
    left: 8px;
    top: 12px;
    font-size: 22px;
    user-select: none;
}

.lr_box{
    width: 100%;
    height: 380px;
    position: absolute;
    bottom: 0;
    user-select: none;
}

#login_input_superBox{
    width: 352px;
    height: 44px;
    position: absolute;
    left: 50%;
    margin-left: -176px;
    top: 60px;
}

.login_input_box{
    width: 350px;
    height: 40px;
    border: 1px solid rgba(161, 161, 161, 0.67);
    line-height: 40px;
    text-align: center;
}

#login_input_box2{
    border-top-color: rgba(255, 255, 255, 0);
    position: relative;
    top: -1px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

#login_input_box1{
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

#login_username_text{
    position: absolute;
    left: 20px;
}

#login_password_text{
    position: absolute;
    left: 20px;
}

#login_username_input{
    height: 28px;
    width: 175px;
    position: absolute;
    top: 8px;
    left: 90px;
    border: none;
    outline: none;
    font-size: 16px;
}

#login_password_input{
    height: 28px;
    width: 175px;
    position: absolute;
    top: 8px;
    left: 90px;
    border: none;
    outline: none;
    font-size: 16px;
}

#login_submit{
    width: 140px;
    height: 50px;
    border-radius: 10px;
    background: #00a0e9;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 20px;
    position: absolute;
    left: 50%;
    margin-left: -70px;
    top: 140px;
}

#login_submit:hover{
    background: #1db0ee;
    user-select: none;
    cursor: pointer;
}

.login_errors_message{
    width: 84px;
    height: 40px;
    color: red;
    position: absolute;
    right: 2px;
    font-size: 12px;
    line-height: 20px;
    user-select: none;
}

/*
    注册表单
*/
#register_input_superBox{
    width: 352px;
    height: 44px;
    position: absolute;
    left: 50%;
    margin-left: -176px;
    top: 60px;
}

.register_input_box{
    width: 350px;
    height: 40px;
    border: 1px solid rgba(161, 161, 161, 0.67);
    line-height: 40px;
    text-align: center;
}

#register_input_box4{
    border-top-color: rgba(255, 255, 255, 0);
    position: relative;
    top: -1px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

#register_input_box3{
    border-top-color: rgba(255, 255, 255, 0);
    position: relative;
    top: -1px;
}

#register_input_box2{
    border-top-color: rgba(255, 255, 255, 0);
    position: relative;
    top: -1px;
}

#register_input_box1{
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

#register_username_text{
    position: absolute;
    left: 20px;
}

#register_password_text{
    position: absolute;
    left: 20px;
}

#register_confirmThePassword_text{
    position: absolute;
    left: 15px;
}

#register_secretProtection_text{
    position: absolute;
    left: 20px;
}

#register_username_input{
    height: 28px;
    width: 175px;
    position: absolute;
    top: 8px;
    left: 90px;
    border: none;
    outline: none;
    font-size: 16px;
}

#register_password_input{
    height: 28px;
    width: 175px;
    position: absolute;
    top: 8px;
    left: 90px;
    border: none;
    outline: none;
    font-size: 16px;
}

#register_confirmThePassword_input{
    height: 28px;
    width: 175px;
    position: absolute;
    top: 8px;
    left: 90px;
    border: none;
    outline: none;
    font-size: 16px;
}

#register_secretProtection_input{
    height: 28px;
    width: 175px;
    position: absolute;
    top: 8px;
    left: 90px;
    border: none;
    outline: none;
    font-size: 16px;
}

#register_submit{
    width: 140px;
    height: 50px;
    border-radius: 10px;
    background: #00a0e9;
    text-align: center;
    line-height: 50px;
    color: white;
    font-size: 20px;
    position: absolute;
    left: 50%;
    margin-left: -70px;
    top: 190px;
}

#register_submit:hover{
    background: #1db0ee;
    user-select: none;
    cursor: pointer;
}

.register_errors_message{
    width: 84px;
    height: 40px;
    color: red;
    position: absolute;
    right: 2px;
    font-size: 12px;
    line-height: 19px;
    user-select: none;
}

Take a look at the page preview

After the style editing is completed, you can start writing js code

Let’s first implement the function of switching between login and registration.

Add a click event to the blue button in the upper left corner

Write in the method

//隐藏登录框
function loginHandOff() {
    loginDiv.style.display = "none";
    registerDiv.style.display = "block";
    document.getElementById("login_username_input").value = '';
    document.getElementById("login_password_input").value = '';
    let loginErrorsMessage = document.getElementsByClassName("login_errors_message");
    loginErrorsMessage[0].innerHTML = "";
    loginErrorsMessage[1].innerHTML = "";
}

//隐藏注册框
function registerHandOff() {
    loginDiv.style.display = "block";
    registerDiv.style.display = "none";
    document.getElementById("register_username_input").value = '';
    document.getElementById("register_password_input").value = '';
    document.getElementById("register_confirmThePassword_input").value = '';
    document.getElementById("register_secretProtection_input").value = '';
    let registerErrorsMessage = document.getElementsByClassName("register_errors_message");
    registerErrorsMessage[0].innerHTML = "";
    registerErrorsMessage[1].innerHTML = "";
    registerErrorsMessage[2].innerHTML = "";
    registerErrorsMessage[3].innerHTML = "";
}

The idea here is to call the corresponding method after clicking, then make the login container disappear (display:none), let the registration container display (display:block), or vice versa

It should be noted that when switching to another window, the value in the input box and the value in the error prompt box need to be cleared to achieve the refresh effect.

After that, we need to conduct a real-time verification of the value in the input box to improve the comfort of use.

The effect is as follows

The method implemented here is to add a "change" event to each input box. Compared to the blur event, the change event is triggered when the object value changes, while the blur event is triggered when the object loses focus, which avoids not inputting after clicking the input box. The content reported an error message.

//注册输入框验证提示信息
    registerUserNameInput.addEventListener("change",function (){
        userNameVali(this,"register_errors_message","register");
    })
    registerPasswordInput.addEventListener("change",function (){
        passWordVali(this,"register_errors_message","register");
    })
    registerConfirmThePasswordInput.addEventListener("change",function (){
        confirmThePasswordVali(this,registerPasswordInput);
    })
    registerSecretProtectionInput.addEventListener("change",function (){
        encryptedVali(this);
    })

Execute js verification method in change event

//用户名验证
function userNameVali(Object,textFor,type){
    let reg = /^[a-zA-Z0-9]{6,20}$/;
    let userNameText = document.getElementsByClassName(textFor)[0];
    let userNameValue = Object.value;
    if (type === "login"){
        if (userNameValue == null || userNameValue === ""){
            userNameText.innerHTML = "用户名不能为空";
            loginUserNmeFlag = false;
        }else if (!(reg.test(userNameValue))){
            userNameText.innerHTML = "长度为6-20,只能包含数字字母";
            loginUserNmeFlag = false;
        }else {
            userNameText.innerHTML = "";
            loginUserNmeFlag = true;
        }
    }else {
        if (userNameValue == null || userNameValue === ""){
            userNameText.innerHTML = "用户名不能为空";
            userNmeFlag = false;
        }else if (!(reg.test(userNameValue))){
            userNameText.innerHTML = "长度为6-20,只能包含数字字母";
            userNmeFlag = false;
        }else {
            userNameText.innerHTML = "";
            userNmeFlag = true;
        }
    }
}

//密码验证
function passWordVali(Object,textFor,type){
    let reg = /^(?=.*[0-9])(?=.*[a-zA-Z])(.{8,20})$/;
    let passWordText = document.getElementsByClassName(textFor)[1];
    let passWordValue = Object.value;
    if (type === "login"){
        if (passWordValue == null || passWordValue === ""){
            passWordText.innerHTML = "密码不能为空";
            loginPassWordFlag = false;
        }else if (!(reg.test(passWordValue))){
            passWordText.innerHTML = "长度为8-20,须包含数字和字母";
            loginPassWordFlag = false;
        }else {
            passWordText.innerHTML = "";
            loginPassWordFlag = true;
        }
    }else {
        if (passWordValue == null || passWordValue === ""){
            passWordText.innerHTML = "密码不能为空";
            passWordFlag = false;
        }else if (!(reg.test(passWordValue))){
            passWordText.innerHTML = "长度为8-20,须包含数字和字母";
            passWordFlag = false;
        }else {
            passWordText.innerHTML = "";
            passWordFlag = true;
        }
    }

}

//确认密码验证
function confirmThePasswordVali(Object,passWord){
    let confirmThePasswordText = document.getElementsByClassName("register_errors_message")[2];
    let confirmThePasswordValue = Object.value;
    let passWordValue = passWord.value;
    if (confirmThePasswordValue == null || confirmThePasswordValue === ""){
        confirmThePasswordText.innerHTML = "确认密码不能为空";
        confirmThePasswordFlag = false;
    }else if (confirmThePasswordValue !== passWordValue){
        confirmThePasswordText.innerHTML = "两次密码不一致";
        confirmThePasswordFlag = false;
    }else {
        confirmThePasswordText.innerHTML = "";
        confirmThePasswordFlag = true;
    }
}

//密保验证
function encryptedVali(Object){
    let reg = /^\d{6,8}$/;
    let encryptedText = document.getElementsByClassName("register_errors_message")[3];
    let encryptedValue = Object.value;
    if (encryptedValue == null || encryptedValue === ""){
        encryptedText.innerHTML = "密保不能为空";
        encryptedFlag = false;
    }else if (!(reg.test(encryptedValue))){
        encryptedText.innerHTML = "密保只能为6-8位的   纯数字";
        encryptedFlag = false;
    }else {
        encryptedText.innerHTML = "";
        encryptedFlag = true;
    }
}

First, perform non-empty verification (including empty strings to prevent users from entering all spaces), and then use regularity to verify the data specifications. If there is an item that fails, the outer identifier will return false. If all pass, it will return true.

userNmeFlag = false;
    passWordFlag = false;
    confirmThePasswordFlag = false;
    encryptedFlag = false;

Note that the identifier must be a global variable for easy access.

This time I will stop here. Chapter 2 will be released later. If you need to discuss, please leave a message in the comment area. See you in the next issue!

javaweb(js) implementation of login registration case (1)

Guess you like