JavaWeb课程设计:用户和商品管理系统

Posted 晚风Adore

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaWeb课程设计:用户和商品管理系统相关的知识,希望对你有一定的参考价值。

设计要求

使用JavaWeb写一个管理系统,可以进行登录注册,对mysql数据库中的用户和商品信息进行管理。

使用工具

IDEA、MySQL Workbench、LayUI框架

需要源码的可以从下面链接获取

UserSystemZIP.zip

注册界面

一、表单

html的form表单。onblur()是输入框失去焦点时执行的函数。

<form id="Form" method="POST" action="register">
        <div class="form-item">
            <div class="form-title">用户名</div>
            <input type="text" name="Name" id="name-input" onblur="checkName()">

        </div>
        <div id="name-errMsg"></div>   <!--用于显示错误信息 -->


        <div class="form-item">
            <div class="form-title">密码</div>
            <input type="password" name="Pwd" id="pwd-input1" onblur="checkPwd1()">
        </div>
        <div id="pwd-errMsg1"></div>


        <div class="form-item">
            <div class="form-title">重复密码</div>
            <input type="password" name="Pwd2" id="pwd-input2" onblur="checkPwd2()">
        </div>
        <div id="pwd-errMsg2"></div>

        <div class="form-item">
            <div class="form-title">昵称</div>
            <input type="text" name="NickName" id="nickName-input" onblur="checkEmail()">
        </div>
        <div id="nickName-div"></div>

        <div class="form-item">
            <div class="form-title">电话号码</div>
            <input type="number" name="Tel" id="tel-input" onblur="checkTel()" >
        </div>
        <div id="tel-errMsg"></div>


        <div class="form-item">
            <div class="form-title">邮箱</div>
            <input type="text" name="Email" id="email-input" onblur="checkEmail()">
        </div>
        <div id="email-errMsg"></div>

        <div class="form-item">
            <div class="form-title">住址</div>
            <input type="text" name="Address" id="address-input" onblur="checkEmail()">
        </div>
        <div id="address-div"></div>

        <div id="submit-div">
            <div id="submit-left">

            </div>
            <div id="submit-mid">
                <button type="submit" id="Submit">注册</button>
            </div>
            <div id="submit-right">
                <a href="LoginPage.jsp" id="login">已有账号,前往登录</a>
            </div>
        </div>
    </form>

二、注册格式检查

注册格式检查需要检查:

  • 用户名:不能包含特殊字符
  • 密码:不能包含特殊字符
  • 重复密码一致性检查
  • 电话号码:十一位数字
  • 邮箱:格式检查
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script>
        //定义变量控制是否能提交
        //Enable为true表示格式正确 , Empty为false表示不为null或空字符串
        var nameEnable  = false;
        var nameEmpty   = true;

        var pwdEnable   = false;
        var pwd1Empty   = true;
        var pwd2Empty   = true;

        var telEnable   = false;
        var telEmpty    = true;

        var emailEnable = false;
        var emailEmpty  = true;

        //判断字符串是否为null或空字符串 ""
        function CheckEmpty(ss){
            return ss == null || ss === "";
        }


        //检查用户名,不能出现特殊字符
        function checkName(){
            //失去焦点(光标)后执行的事件函数
            var inputName = document.getElementById("name-input").value;

            var pattern = new RegExp("[` ~!@#$^&*()%=|{}':;',\\\\[\\\\].<>《》/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]");


            if(!CheckEmpty(inputName)){
                nameEmpty = false;

                if(pattern.test(inputName)){  //包含特殊字符
                    document.getElementById("name-errMsg").innerHTML = "用户名格式错误,不能包含特殊字符!"
                    document.getElementById("name-input").style = "border:2px solid red;"
                    nameEnable = false;
                }else{
                    document.getElementById("name-errMsg").innerHTML = "  "
                    document.getElementById("name-input").style = "border:0px;"
                    nameEnable = true;
                }
            }else{
                nameEmpty = true;
            }


        }

        //检查密码,
        function checkPwd1(){
            var inputPwd_1 = document.getElementById("pwd-input1").value;
            var inputPwd_2 = document.getElementById("pwd-input2").value;


            if(!CheckEmpty(inputPwd_1) && !CheckEmpty(inputPwd_2)){
                pwd1Empty = false;
                pwd2Empty = false;

                if(inputPwd_1 != inputPwd_2){
                    document.getElementById("pwd-errMsg2").innerHTML = "两次密码不相同,请检查!";
                    document.getElementById("pwd-input1").style = "border:2px solid red;"
                    document.getElementById("pwd-input2").style = "border:2px solid red;"
                    pwdEnable = false;
                }
                if(inputPwd_1 == inputPwd_2){
                    document.getElementById("pwd-errMsg2").innerHTML = "  ";
                    document.getElementById("pwd-input1").style = "border:0px;"
                    document.getElementById("pwd-input2").style = "border:0px;"
                    pwdEnable = true;
                }

            }else if(!CheckEmpty(inputPwd_1) && CheckEmpty(inputPwd_2)){
                pwd1Empty = false;
                pwd2Empty = true;
            }else if(CheckEmpty(inputPwd_1) && !CheckEmpty(inputPwd_2)){
                pwd1Empty = true;
                pwd2Empty = false;
            }else{
                pwd1Empty = true;
                pwd2Empty = true;
            }
        }

        //检查重复密码,是否相同
        function checkPwd2(){
            var inputPwd_1 = document.getElementById("pwd-input1").value;
            var inputPwd_2 = document.getElementById("pwd-input2").value;


            if(!CheckEmpty(inputPwd_1) && !CheckEmpty(inputPwd_2)){
                pwd1Empty = false;
                pwd2Empty = false;

                if(inputPwd_1 != inputPwd_2){
                    document.getElementById("pwd-errMsg2").innerHTML = "两次密码不相同,请检查!";
                    document.getElementById("pwd-input1").style = "border:2px solid red;"
                    document.getElementById("pwd-input2").style = "border:2px solid red;"
                    pwdEnable = false;
                }
                if(inputPwd_1 == inputPwd_2){
                    document.getElementById("pwd-errMsg2").innerHTML = "  ";
                    document.getElementById("pwd-input1").style = "border:0px;"
                    document.getElementById("pwd-input2").style = "border:0px;"
                    pwdEnable = true;
                }

            }else if(!CheckEmpty(inputPwd_1) && CheckEmpty(inputPwd_2)){
                pwd1Empty = false;
                pwd2Empty = true;
            }else if(CheckEmpty(inputPwd_1) && !CheckEmpty(inputPwd_2)){
                pwd1Empty = true;
                pwd2Empty = false;
            }else{
                pwd1Empty = true;
                pwd2Empty = true;
            }

        }

        //检查电话号码,是否全是数字,是否为十一位
        function checkTel(){
            var inputTel = document.getElementById("tel-input").value;
            var flag = true;

            if (!CheckEmpty(inputTel)){
                telEmpty = false;

                if (!(/^1[3456789]\\d{9}$/.test(inputTel))) {
                    // 格式错误
                    flag=false;
                }
                if(!flag){
                    document.getElementById("tel-errMsg").innerHTML = "手机号格式错误,请检查!"
                    document.getElementById("tel-input").style = "border:2px solid red;"
                }else{
                    document.getElementById("tel-errMsg").innerHTML = "   ";
                    document.getElementById("tel-input").style = "border:0px;"

                }

                telEnable = flag;
            }else{
                telEmpty = true;
            }


        }

        //检查邮箱格式
        function checkEmail(){
            var inputEmail = document.getElementById("email-input").value;
            var flag = true;
            var reg = /^\\w+((-\\w+)|(\\.\\w+))*\\@[A-Za-z0-9]+((\\.|-)[A-Za-z0-9]+)*\\.[A-Za-z0-9]+$/;

            if(!CheckEmpty(inputEmail)){
                emailEmpty = false;
                //调用正则验证test()函数
                if(!reg.test(inputEmail)){
                    flag = false;
                }
                if(!flag){
                    document.getElementById("email-errMsg").innerHTML = "邮箱格式不正确,请检查!"
                    document.getElementById("email-input").style = "border:2px solid red;"
                }else{
                    document.getElementById("email-errMsg").innerHTML = "   "
                    document.getElementById("email-input").style = "border:0px;"
                }

                emailEnable = flag;
            }else{
                emailEmpty = true;
            }


        }


        $(document).ready(function () {
            $("#name-input").focus();
            //全局检查并判断是否可以提交
            $("#Submit").click(function () {
                if(nameEmpty){
                    document.getElementById("name-input").style = "border:2px solid red;"
                    alert("请输入用户名!");
                    return;

                }else if(pwd1Empty){
                    document.getElementById("pwd-input1").style = "border:2px solid red;"
                    alert("请输入密码!");
                    return;

                }else if(pwd2Empty){
                    document.getElementById("pwd-input2").style = "border:2px solid red;"
                    alert("请再次输入密码!");
                    return;

                }else if(telEmpty){
                    document.getElementById("tel-input").style = "border:2px solid red;"
                    alert("请输入电话号码!");
                    return;

                }else if(emailEmpty){
                    document.getElementById("email-input").style = "border:2px solid red;"
                    alert("请输入邮箱!");
                    return;

                }else if(!nameEnable){
                    return;
                }else if(!pwdEnable){
                    return计算机课程设计-基于javaweb的在线点餐系统-线上点餐系统代码java外卖点餐系统代码

C语言课程设计

JavaWeb课程设计——基于Jsp+Servlet+MySQL的科研申报系统课程设计

JavaWeb SSM SpringBoot女士电商平台10(源码+sql+论文可运行《精品毕设》)登录注册商品浏览分类管理模糊查找轮播图热销商品购物车订单订单流程控制用户管理

javaweb项目电子商城购物系统课程设计任务书及成绩评定和毕业设计与实现

计算机毕业设计之java+javaweb的二手商品交易系统