登陆注册

最新推荐文章于 2024-07-13 13:55:40 发布

wuli仓鼠小库 ^|^

最新推荐文章于 2024-07-13 13:55:40 发布

阅读量173

点赞数

文章标签： java

本文链接：https://blog.csdn.net/weixin_48741294/article/details/108336437

版权

登陆注册功能的实现

自动登录、是否保留用户密码、数据回显

1.准备登录表单用于填写用户登录信息

jsp文件中：

隐藏输入框传值、web中dom使用、事件绑定、jsp EL表达式的常规使用

<form action="user3">
	<%--隐藏输入框--%>
    <input type="hidden" name="method" value="login2">
    <input type="text" name="username" value="${username} placeholder="请输入用户名"><br>
    <input type="password" name="password" placeholder="请输入密码">
    <input type="checkbox" name="saveuser" user="1">保存一周 <br>
    <button> 登录</button>
</form>
<script>
   // 获取表单控件中name为username元素，自动登录的实现是仅需输入用户账号
   document.forms[0].username.addEventListener('blur',function(){
    	//获取输入的用户名
        var username = this.value;
		//请求后端的checkCookie方法
        location.href="user3?method=checkCookie&username="+username;
    })
</script>

2.编写Servlet类：

封装类BaseServlet的使用、会话跟踪技术、请求转发与重定向的使用

import com.alibaba.fastjson.JSON;
import com.softeem.entity.User;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.util.Objects;

@WebServlet("/user3")
public class UserServlet3 extends BaseServlet {
    
    public void login2(HttpServletRequest request,HttpServletResponse response) throws IOException {
        //获取用户名
        String username = request.getParameter("username");
        //获取用户密码
        String password = request.getParameter("password");
        
        if("admin".equals(username) && "123456".equals(password)){
            //登录成功，查看是否勾选保存密码
            String s = request.getParameter("saveuser");
            //根据获取到的用户信息创建用户对象
            User user = new User();
            user.setUsername(username);
            user.setPassword(password);
             //勾选了保存密码选项
            if(s != null){
                //将用户对象转换为json数据
                String json = JSON.toJSONString(user);
                //json数据编码方式为utf-8
                json = URLEncoder.encode(json, "utf-8");
                //将用户信息存到Cookie作用域中
                Cookie c1 = new Cookie("username", json);
                response.addCookie(c1);
            }
            //未勾选保存密码选项，直接到成功登录的下一页面
            response.sendRedirect("index.jsp");
        }else{
            //登录未成功，返回登陆页面重新登陆（刷新）
            response.sendRedirect("login.html");
        }
    }
    
	/**
     * 检查cookie保存的数据信息
     * @param request
     * @param response
     * @throws IOException
     * @throws ServletException
     */
    public void checkCookie(HttpServletRequest request,HttpServletResponse response) throws IOException, ServletException {
		//获取请求的用户名，对应jsp文件中javascript中的请求
        String username = request.getParameter("username");
        //准备接收数据的容器
        String json = null;
        //获取客户端的cookie
        Cookie[] cookies = request.getCookies();
        for(Cookie c:cookies){
            //判断当前读取到的cookie键是否是user
            if(Objects.equals(c.getName(),"user")){
                //获取对应值
                json = c.getValue();
                break;
            }
        }
        if(json != null){
            //解码cookie的值
            json = URLDecoder.decode(json,"utf-8");
            //将json中的用户对象存储到session中
            User user = JSON.parseObject(json,User.class);
            //如果客户端输入的用户名恰好是cookie中存储的用户，则将用户信息存入session
            if(username.equals(user.getUsername())){
                
 			 //将cookie中的用户对象存储到session中
             request.getSession().setAttribute("user",user);
                //直接自动登陆
                response.sendRedirect("index.jsp");
                return;
            }
        }
        //将用户名存储到request范围（数据回显）
        request.setAttribute("username",username);
        //返回登陆界面，并将请求数据传递过去
        request.getRequestDispatcher("login.jsp").forward(request,response);
    }
}

用户注册验证结果（简单格式验证）

隐藏框传值、dom使用、事件绑定
通过改变输入框的className属性值，对应不同类选择器呈现不同样式

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        input{
            margin: 10px;
            padding: 0 10px;
            width: 350px;
            height: 40px;
            border: 1px solid rgba(0,0,0,0.2);
            border-radius: 5px;
        }
        .err{
            border-color: rgba(255,0,0,0.8);
        }
        .ok{
            border-color: rgba(0,255,0,0.5);
        }
    </style>
</head>
<body>
    <h1>用户注册</h1>
    <form id="f">
        <input type="hidden" name="method" value="register">
        <input type="text" name="username" placeholder="请输入用户名"><br>
        <input type="password" name="password" placeholder="请输入密码"><br>
        <input type="password" name="repass" placeholder="请重复输入"><br>
        <input type="number" name="age" placeholder="请输入年龄"><br>
        <input type="button" id="btnReg" value="注册">
    </form>

    <script>
        document.getElementById('btnReg').addEventListener('click',function(){
            var form = document.getElementById('f');
            var uname = form.username.value;
            var pwd = form.password.value;
            var repass = form.repass.value;
            var age = form.age.value;

            if(uname.length<1){
                form.username.className='err';
                return;
            }else{
                form.username.className='ok';
            }
            if(pwd.length<1){
                form.password.className='err';
                return;
            }else{
                form.password.className='ok';
            }
            if(repass.length<1){
                form.repass.className='err';
                return;
            }else{
                if(repass != pwd){
                    form.repass.className='err';
                }else{
                    form.repass.className='ok';
                }
            }
            if(age.length<1){
                form.age.className='err';
                return;
            }else{
                form.age.className='ok';
            }
            form.action='user';
            form.submit();
        })
    </script>
</body>
</html>

前端手机号格式验证

Javascript、事件绑定、正则表达式

<body>
    <input type="text" id="phone" placeholder="请输入手机号">
    <button onclick="check()">验证</button>
    <script>
        function check(){
            var input = document.getElementById('phone');
            //获取输入框值
            var phone = input.value;
            //正则表达式
            var regex = /^1[345789]\d{9}$/;
            if(regex.test(phone)){
                alert('手机格式正确');
            }else{
                alert('格式不正确');
            }
        }
    </script>
</body>

wuli仓鼠小库 ^|^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
登陆注册

登陆注册功能的实现自动登录、是否保留用户密码、数据回显1.准备登录表单用于填写用户登录信息jsp文件中：隐藏输入框传值、web中dom使用、事件绑定、jsp EL表达式的常规使用<form action="user3"> <%--隐藏输入框--%> <input type="hidden" name="method" value="login2"> <input type="text" name="username" value="
复制链接

扫一扫