JAVA项目:登录注册+表单检验(mysql+js+jQuery+Ajax异步刷新)

此DEMO包含以下功能

  1. 登录界面(检验用户密码是否为空)
  2. 检验登录(检验用户名密码是否匹配+传值到用户界面)
  3. 注册界面(表单检验+运用Ajax实现用户名唯一性检验并异步刷新提示)
  4. 检验注册(插入信息到mysql数据库)

登陆界面

JAVA项目:登录注册+表单检验(mysql+js+jQuery+Ajax异步刷新)_第1张图片
登录界面包含了“检验用户名密码是否为空”,下面给出界面代码

loginUI.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(document).ready(function(){
            $("input").blur(function(){
                var $parent = $(this).parent();
                $parent.find(".onError").remove();
                if ($(this).is("#username")) {
                    if (this.value==="") {//检验用户名
                        $parent.append("用户名不能为空!")
                    }
                }
                if ($(this).is("#password")) {
                    if (this.value==="") {//检验密码
                        $parent.append("密码不能为空!")
                        }
                    }
            });
            //如果是空的话,则不能提交
            $("form").submit(function(){
                $("form input").trigger("blur");
                if($(".onError").length>0) return false;
            });
        });
    </script>
</head>
<body>
<section class="forms">
    <div class="container">
        <div class="forms-grid">
            <div class="login">
                <strong>欢迎登录</strong>
                <form action="#" method="post" class="login-form">
                    <div class="form">
                        <div class="form-row">
                            <label class="form-label">用户名</label>
                            <label for="username"></label>
                            <input type="text" class="form-text" id="username" name="username">

                        </div>
                        <div class="form-row">
                            <label class="form-label">密码</label>
                            <label for="password"></label>
                            <input type="password" class="form-text" id="password" name="password">
                        </div>
                        <div class="form-row bottom">
                            <a href="registerUI.jsp" class="register">点此注册</a>
                        </div>
                        <div class="form-row button-login">
                            <button type="button" class="btn" style="float: left" onclick="encodeURI(location.href='CheckLogin.jsp?username='+username.value+'&password='+password.value)">用户登录</button>
                        </div>
                        <form method="post" action="#">
                            <button type="button" class="btn" style="float: right" onclick="encodeURI(location.href='CheckAdmin.jsp?username='+username.value+'&password='+password.value)">后台登陆</button>
                        </form>

                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
</body>
</html>

下面给出登录功能代码

CheckLogin.jsp

<%@ page import="java.sql.*" %>
<%@ page import="java.nio.charset.StandardCharsets" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>CheckLogin</title>
</head>
<body>
    <%
    	//从登录界面获取用户名和密码
        String username=new String(request.getParameter("username").getBytes(StandardCharsets.ISO_8859_1), StandardCharsets.UTF_8);
        String pwd=new String(request.getParameter("password").getBytes(StandardCharsets.ISO_8859_1), StandardCharsets.UTF_8);
        //加载连接数据库所需的信息
        String sDBDriver = "com.mysql.jdbc.Driver";
        String conStr = "jdbc:mysql://172.18.97.253:3306/webdb?useSSL=false";
        String dbname = "web";
        String password = "web";

        String usersex;
        String headpath;
		
		//连接数据库并进行查询
        Connection conn=null;
        try {
            Class.forName(sDBDriver);
            conn = DriverManager.getConnection(conStr, dbname, password);
        } catch (ClassNotFoundException | SQLException cnfe) {
            cnfe.printStackTrace();
        }
        if(conn!=null){
            String sql="select * from peo19082203 where name='"+username+"' and pwd='"+ pwd + "'";
            Statement stmt= null;
            try {
                stmt = conn.createStatement();
            } catch (SQLException e) {
                e.printStackTrace();
            }
            ResultSet rs = null;
            try {
                assert stmt != null;
                rs = stmt.executeQuery(sql);//将查询结果保存到rs里面
            } catch (SQLException e) {
                e.printStackTrace();
            }

            try {
                assert rs != null;
                if(rs.next()){
                //在数据库里是将0作为女性,1作为男性,所以这里需要进行一个转换
                    if(rs.getString("sex").equals("0")){
                        usersex="男";
                    }else{
                        usersex="女";
                    }
                    if(rs.getString("photo")==null){//头像
                        headpath="image/backImg.png";
                    }else{
                        headpath=rs.getString("photo");
                    }
                    try {
                        response.sendRedirect("customerUI.jsp?name="+username+"&tel="+rs.getString("tel")+"&sex="+java.net.URLEncoder.encode(usersex, StandardCharsets.UTF_8)+"&path="+headpath);//若用户密码正确,则将信息传给用户界面
                    } catch (SQLException e) {
                        e.printStackTrace();
                    }
                }
                else{
                    out.println("");//若用户名密码不正确则返回登陆界面,并弹出提示“用户名密码错误”
                }
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        else{
            out.println("");
        }
        try {
            assert conn != null;
            conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }


    %>
</body>
</html>

登录成功

JAVA项目:登录注册+表单检验(mysql+js+jQuery+Ajax异步刷新)_第2张图片

登录失败

JAVA项目:登录注册+表单检验(mysql+js+jQuery+Ajax异步刷新)_第3张图片

注册界面

JAVA项目:登录注册+表单检验(mysql+js+jQuery+Ajax异步刷新)_第4张图片
Ajax实现用户名唯一性检验
JAVA项目:登录注册+表单检验(mysql+js+jQuery+Ajax异步刷新)_第5张图片

registerUI.jsp

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    //表单检验
    <script>
        $(document).ready(function(){
            $("input").blur(function(){
                var $parent = $(this).parent();
                $parent.find(".onError").remove();
                if ($(this).is("#username")) {
                    if (this.value==="") {
                        $parent.append("用户名不能为空!")
                    }
                }
                if ($(this).is("#password")) {
                    if (this.value==="") {
                        $parent.append("密码不能为空!")
                    }
                    if(this.value.length < 6&&this.value.length>0){
                        $parent.append("密码长度至少为六位!")
                    }
                }
                if ($(this).is("#tel")) {
                    if (this.value==="") {
                        $parent.append("电话不能为空!")
                    }
                    if(this.value.length !==11&&this.value.length>0){
                        $parent.append("大陆手机电话号码应为11位")
                    }
                }

            });

            $("form").submit(function(){
                $("form input").trigger("blur");
                if($(".onError").length>0) return false;
            });
        });
    </script>
	//Ajax异步刷新(用户名唯一性检验)
    <script type="text/javascript">
        var xmlHttpReq=null;
        function createRequest(){
            if(window.XMLHttpRequest){
                xmlHttpReq=new XMLHttpRequest();
            }else if(window.ActiveXObject){
                xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        function getBackInfo(){
            createRequest();
            var username=document.getElementById("username").value;
            if(xmlHttpReq!=null){
                var url="CheckOnlyName.jsp?username="+username;
                xmlHttpReq.open("get",url,true);
                xmlHttpReq.onreadystatechange=Result;
                xmlHttpReq.send(null);
            }else{
                alert("请求失败!");
            }
        }
        function Result(){
            if(xmlHttpReq.readyState===4){
                if(xmlHttpReq.status===200){
                    document.getElementById("er").innerHTML=xmlHttpReq.responseText;
                }else{
                    alert("请求失败!");
                }
            }
        }
    </script>

</head>
<body>
<section class="forms">
    <div class="container">
        <div class="forms-grid">
            <div class="leftColumn">
                <div class="login">
                    <form class="login-form">
                        <div class="form">
                            <img src="image/机器人.png" height="368" width="276" alt="图片加载失败">
                            <h3>同心同德 拯溺救难</h3>
                        </div>
                    </form>
                </div>
            </div>
            <div class="login" style="height: 540px;width: 400px">
                <strong>注册</strong>
                <form action="CheckRegister.jsp" method="post" class="login-form">
                    <div class="form">
                        <div class="form-row">
                            <label class="form-label" style="color: #4d61fc">用户名</label>
                            <label for="username"></label>
                            <input onblur="getBackInfo()" type="text" class="form-text" id="username" name="username" placeholder="用户名不可是中文">
                            <div id="er" style='color: red;font-size: 5px'></div>
                        </div>
                        <div class="form-row">
                            <label class="form-label" style="color: #4d61fc">密码</label>
                            <label for="password"></label>
                            <input type="password" class="form-text" id="password" name="password" placeholder="密码长度不得小于6位">
                        </div>
                        <div class="form-row">
                            <label class="form-label" style="color: #4d61fc">电话</label>
                            <label for="password"></label>
                            <input type="tel" class="form-text" id="tel" name="tel" placeholder="请输入11位大陆电话号码">
                        </div>
                        <div class="sex" >
                            <label class="form-label" style="float: left;color: #4d61fc">性别</label>
                            <select name="sex" style="float: right">
                                <option value="0" style="font-size: 12px;"></option>
                                <option value="1" style="font-size: 12px;"></option>
                            </select><br/>
                        </div>
                        <div class="form-row button-login"  >
                            <button type="submit" class="btn" style="float: left">注册</button>
                            <button type="reset" class="btn" style="float: right">重置</button>
                        </div>
                    </div>
                  </div>
                </form>
            </div>
        </div>
    </div>
</section>
</body>
</html>

检验用户名唯一性

CheckOnlyName.jsp

<%@ page import="java.sql.*" pageEncoding="utf-8" %>

<%
    String username=request.getParameter("username");
    String sql="select name from peo19082203 where name='"+username+"'";

    String sDBDriver = "com.mysql.jdbc.Driver";
    String conStr = "jdbc:mysql://172.18.97.253:3306/webdb?useSSL=false";
    String dbname = "web";
    String password = "web";

    Connection conn=null;
    try {
        Class.forName(sDBDriver);
        conn = DriverManager.getConnection(conStr, dbname, password);
    } catch (ClassNotFoundException | SQLException cnfe) {
        cnfe.printStackTrace();
    }
    if(conn!=null) {
        Statement stmt = null;
        try {
            stmt = conn.createStatement();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        ResultSet rs = null;
        try {
            assert stmt != null;
            rs = stmt.executeQuery(sql);
        } catch (SQLException e) {
            e.printStackTrace();
        }

        try {
            assert rs != null;
            if (rs.next()) {
                out.println("账号已被注册");
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

%>

注册功能

CheckRegister.jsp

<%@ page contentType="text/html;charset=UTF-8" import="java.sql.*"%>
<html>
<head>
    <title>CheckRegister</title>
</head>
<body>
    <%
    	//获取注册信息
        String username= request.getParameter("username");
        String pwd= request.getParameter("password");
        String sex= request.getParameter("sex");
        String tel= request.getParameter("tel");
		
		//加载连接数据库所需的信息
        String sDBDriver = "com.mysql.jdbc.Driver";
        String conStr = "jdbc:mysql://172.18.97.253:3306/webdb?useSSL=false";
        String dbname = "web";
        String password = "web";
        Connection conn=null;

        try {
            Class.forName(sDBDriver);
            conn = DriverManager.getConnection(conStr, dbname, password);
        } catch (ClassNotFoundException | SQLException cnfe) {
            cnfe.printStackTrace();
        }
        PreparedStatement pStmt = conn.prepareStatement("select * from peo19082203 where name = '" + username + "'");
		//首先检验用户是否存在,若存在则不注册
        ResultSet rs = pStmt.executeQuery();
        try {
            if(rs.next()){
                out.println("");
            }
            else {
                PreparedStatement tmt = null;
                try {//插入数据
                    tmt = conn.prepareStatement("Insert into peo19082203(name,pwd,sex,tel) values('"+username+"','"+pwd+"','"+sex+"','"+tel+"')");
                } catch (SQLException e) {
                    e.printStackTrace();
                }
                int rst = 0;
                try {
                    assert tmt != null;
                    rst = tmt.executeUpdate();
                } catch (SQLException e) {
                    e.printStackTrace();
                }
                if (rst != 0){//注册成功跳转到注册页面
                    out.println("");
                }
                else{//注册失败跳转到注册页面
                    out.println("");
                }
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        try {
            conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        try {
            pStmt.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        try {
            rs.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }
    %>
</body>
</html>

所用到的的css样式在我的资源库中。

你可能感兴趣的:(笔记,ajax,javascript,mysql)