“21天好习惯”第一期

本文链接：https://blog.csdn.net/qq_26228313/article/details/121199717

学习内容：JavaWeb

写了下作业，实现了用户登录及用户注册，主要包括数据库的连接和操作、对输入的各种判断和处理，同时加深理解了前后端分离的思想及其具体操作。

部分代码如下：

注册界面：

$(function () {

    var regUrl = '/user/reg.do';

    //用户名正则，6到20位（字母，数字，下划线，减号）
    var uPattern = /^[a-zA-Z0-9_-]{6,20}$/;
    //密码正则，6到20位（字母（含大小写）+数字的组合）
    var pPattern = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
    //邮箱正则
    var ePattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;


    $('#name').blur(function () {
        // 获取输入的帐号
        var userName = $('#name').val();

        if (uPattern.test(userName) == false) {
            $("#nameMsg").html("用户名6到20位（字母，数字，下划线，减号）");
            $("#nameMsg").css("color", "red");
            return ;
        }

        $.getJSON("/user/userexist.do",{name:userName},function (data){
            if (data.success){
                $("#nameMsg").html("该用户名可用");
                $("#nameMsg").css("color", "green");
            }else{
                $("#nameMsg").html("该用户名已经被注册");
                $("#nameMsg").css("color", "red");
            }
        })
    })

    $('#pwd').blur(function () {
        // 获取输入的密码
        var password = $('#pwd').val();

        if (pPattern.test(password) == false) {
            $("#pwdMsg").html("密码6到20位（字母（含大小写）+数字的组合）");
            $("#pwdMsg").css("color", "red");
            return ;
        }else
        {
            $("#pwdMsg").html("");
        }
    })

    $('#repwd').blur(function () {
        // 获取再次输入的密码
        var repassword = $('#repwd').val();
        var password = $('#pwd').val();

        if (repassword!=password) {
            $("#repwdMsg").html("两次输入的密码不一致！");
            $("#repwdMsg").css("color", "red");
            return ;
        }else
        {
            $("#repwdMsg").html("");
        }
    })

    $('#email').blur(function () {
        // 获取输入的密码
        var email = $('#email').val();

        if (ePattern.test(email) == false) {
            $("#emailMsg").html("邮箱格式不正确！");
            $("#emailMsg").css("color", "red");
            return ;
        }else
        {
            $("#emailMsg").html("");
        }
    })

    $('#submit').click(function () {
        // 获取输入的帐号
        var userName = $('#name').val();
        alert(userName);
        if (!userName) {
            $("#nameMsg").html("用户名不能为空");
            $("#nameMsg").css("color", "red");
            return;
        }
        if (!uPattern.test(userName)) {
            $("#nameMsg").html("用户名6到20位（字母，数字，下划线，减号）");
            $("#nameMsg").css("color", "red");
            return;
        }

        // 获取输入的密码
        var password = $('#pwd').val();
        if (!password) {
            alert('请输入密码！');
            return;
        }
        // 获取重复密码
        var rePassword = $('#repwd').val();
        if (!rePassword) {
            alert('请输入确认密码！');
            return;
        }
        if (password != rePassword) {
            alert('密码不一致！');
            return;
        }

        var email=$("#email").val();
        // 获取验证码
        var verifyCodeActual = $('#j_captcha').val();
        if (!verifyCodeActual) {
            alert('请输入验证码！');
            return;
        }

        // 访问后台进行登录验证
        $.ajax({
            url: regUrl,
            async: false,
            cache: false,
            type: "post",
            dataType: 'json',
            data: {
                name: userName,
                pwd: password,
                email: email,
                verifyCode: verifyCodeActual
            },
            success: function (data) {
                if (data.success) {
                    alert("注册成功！");
                    // 自动链接到登录
                    window.location.href = '/html/user/signin.html';
                } else {
                    alert('注册失败！' + data.errMsg);

                }
            }
        });
    });

})

登录界面：


<!doctype html>
<html  lang="en">

    <head>
        <!-- meta data -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

        <!--font-family-->
		<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900&amp;subset=devanagari,latin-ext" rel="stylesheet">
        
        <!-- title of site -->
        <title>Sign in</title>

        <!-- For favicon png -->
		<link rel="shortcut icon" type="image/icon" href="/frontimages/favicon.png"/>
       
        <!--font-awesome.min.css-->
        <link rel="stylesheet" href="/css/font-awesome.min.css">
		
		<!--animate.css-->
        <link rel="stylesheet" href="/css/animate.css">
		
        <!--bootstrap.min.css-->
        <link rel="stylesheet" href="/css/bootstrap.css">
		
		<!-- bootsnav -->
		<link rel="stylesheet" href="/css/bootsnav.css" >
        
        <!--style.css-->
        <link rel="stylesheet" href="/css/style.css">
        
        <!--responsive.css-->
        <link rel="stylesheet" href="/css/responsive.css">

    </head>
	
	<body>
		<!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->
		
		<!-- signin end -->
		<section class="signin popup-in">
			<div class="container">

				<div class="sign-content popup-in-content">
					<div class="popup-in-txt">
						<h2>登 录</h2>
						
						<div class="row">
							<div class="col-sm-12">
								<div class="signin-form">

										<div class="form-group">

										    <input type="text" class="form-control" id="name" placeholder="请输入用户名">
											<span id="nameMsg"></span>
										</div><!--/.form-group -->
										<div class="form-group">

										    <input type="password" class="form-control" id="pwd" placeholder="请输入密码" >
											<span id="pwdMsg"></span>
										</div><!--/.form-group -->
										<div class="form-group">

											<input type="text" id="j_captcha" class="form-control" placeholder="验证码" style="width:100px;float: left;">

												<img id="captcha_img" alt="点击更换" title="点击更换"
													 onclick="changeVerifyCode(this)" src="/Kaptcha" style="margin-left: 10px;"/>

										</div><!--/.form-group -->

								</div><!--/.signin-form -->
							</div><!--/.col -->
						</div><!--/.row -->
						
						<div class="row">
							<div class="col-sm-12">
								<div class="signin-password">
									<div class="awesome-checkbox-list">
										<ul class="unstyled centered">

											<li>
											    <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" value="value2">
											    <label for="styled-checkbox-2">记住密码</label>
											</li>

											<li>
											    <a href="#">忘记密码 ?</a>
											</li>

										</ul>
									</div><!--/.awesome-checkbox-list -->
								</div><!--/.signin-password -->
							</div><!--/.col -->
						</div><!--/.row -->

						<div class="row">
							<div class="col-sm-12">
								<div class="signin-footer">
									<button type="button" class="btn signin_btn" id="submit">
									登 录
									</button>
									<p>
										还没有账号?
										<a href="/html/user/reg.html">注册</a>
									</p>
								</div><!--/.signin-footer -->
							</div><!--/.col-->
						</div><!--/.row -->
					</div><!-- .popup-in-txt -->
				</div><!--/.sign-content -->
			</div><!--/.container -->

		</section><!--/.signin -->
		
		<!-- signin end -->

		<!--footer copyright start -->
		<footer class="footer-copyright">
			<div id="scroll-Top">
				<i class="fa fa-angle-double-up return-to-top" id="scroll-top1" data-toggle="tooltip" data-placement="top" title="" data-original-title="Back to Top" aria-hidden="true"></i>
			</div><!--/.scroll-Top-->

		</footer><!--/.hm-footer-copyright-->
		<!--footer copyright  end -->


		 <!-- Include all js compiled plugins (below), or include individual files as needed -->

		<script src="/js/jquery-3.6.0.min.js"></script>

		<!--bootstrap.min.js-->
        <script src="/js/bootstrap.min.js"></script>
		
		<!-- bootsnav js -->
		<script src="/js/bootsnav.js"></script>
		
		<!-- jquery.sticky.js -->
		<script src="/js/jquery.sticky.js"></script>

        
        <!--Custom JS-->
        <script src="/js/custom.js"></script>
		<script src="/js/common.js"></script>
		<script src="/js/user/signin.js"></script>
    </body>
	
</html>