Java Web制作用戶注冊從安裝到完成-簡陋洛谷（這可能是全網最詳細簡單的教程）【此后無良辰】-有解無憂

Java Web制作用戶注冊從安裝到完成-簡陋洛谷（這可能是全網最詳細簡單的教程）

在這里插入圖片描述

要求看看就好后有總結

1．下載安裝Tomcat8，對其進行配置，啟動Tomcat服務器，在瀏覽器輸入 http://127.0.0.1:8080/，查看瀏覽器輸出界面；
2. 定制配置：
（1）修改Tomcat的服務埠為88（默認安裝為8080）；
（2）修改HTTP GET方式的字符編碼為UTF-8（默認為ISO-8859-1）； 
3.撰寫一個用戶注冊模塊，功能如下：
（1）設計用戶注冊表單頁面register.jsp，包含：用戶名（文本框）、密碼（密碼框）、性別（下拉框）；
（2）設計用戶注冊資料保存頁面doRegister.jsp，用以保存用戶資料至user.txt檔案，
user.txt中每行保存一個用戶，格式為：“用戶名,密碼,性別”；
（3）如果user.txt已包含同名的用戶，提示用戶已存在；否則提示注冊成功，
4.撰寫用戶登錄模塊，功能如下：
（1）設計用戶登錄表單頁面login.jsp，包含：用戶名（文本框）、密碼（密碼框）；
（2）設計登錄驗證檔案doLogin.jsp，獲取客戶端提交的用戶名、密碼，然后從user.txt中驗證是否存在該用戶，登錄密碼是否正確；
（3）將登錄驗證結果反饋給用戶，

在這里插入圖片描述

總結一下

1.做一個網站其中要用到網路服務器Tomcat（~~因為不要錢~~ ）好用！
在這里插入圖片描述

2.注冊要驗證重復資訊
3.設計登陸頁面，一共等于四個jsp檔案

需要的知識和軟體

基本的前端知識，前端知識都不會就別提做網頁了吧，推薦B大學

這是我自己推薦的，當然有點老了，新的可以看尚硅谷的（使用的是idea）
檔案輸入輸出，因為其他知識的冗雜，這點顯得很簡單，詳情請見我的另一篇博客—JAVA學習
服務器的安裝知識，推薦一篇特別好的博客安裝Tomcat
在idea部署服務器鏈接：2020idea部署Tomcat
---------------------------------------------------分界線-----------------------------------------------

正式開始

如果你真的把需要的知識學好了
把必須的軟體安裝部署好了
其實就非常簡單了
只剩下碼代碼和debug
在這里插入圖片描述
我這里就只放register.jsp（注冊頁面）的代碼了
input的地址結合自己電腦修改

<%--
  Created by IntelliJ IDEA.
  User: 11861
  Date: 2020/10/29
  Time: 20:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="utf-8">//UTF-8
  <title>注冊洛谷</title>//標題
  <style type="text/css">
    span{
      color: crimson;
      font-size:  0.75rem;
    }
    .logo[data-v-a363f012] {
      width: 160px;
      display: block;
    }
    .motto[data-v-a363f012] {
      color: rgb(52, 152, 219);
      font-weight: 400;
      margin-bottom: 1.5em;
    }</style>//一些樣式
</head>
<body>
<script type = "text/javascript">
  window.onload = function(){//名字驗證
    var usernameSpan = document.getElementById("usernameError");
    var usernameError = document.getElementById("username");
    usernameError.onblur = function(){
      var usernameValue = usernameError.value;
      usernameValue = usernameValue.trim();
      if(usernameValue===""){
        usernameSpan.innerText= "用戶名不能為空 ";
      }else {
        if (usernameValue.length < 6 || usernameValue.length > 12) {
          usernameSpan.innerText = "用戶名長度必須大于6小于12";
        } else {
          var regExp = /^[A-Za-z0-9]+$/;//正則運算式
          var sym = regExp.test(usernameValue);
          if (sym) {
          } else {
            usernameSpan.innerText = "用戶名只能由數字和字符組成";
          }
        }
      }
    }
    usernameError.onfocus = function (){//用戶名錯誤，清空用戶名，后面一樣
      if(usernameSpan.innerText!=""){
        usernameError.value="";
      }
      usernameSpan.innerText="";
    }
    var password1 = document.getElementById("password1");
    var password1span = document.getElementById("passwordError1")
    password1.onblur = function(){
      var password1_value = password1.value;
      password1_value = password1_value.trim();
      if(password1_value===""){
        password1span.innerText= "密碼不能為空 ";
      }else{
        if(password1_value.length<6||password1_value.length>12){
          password1span.innerText= "密碼長度必須大于6小于12";
        }else{
          var regExp = /^[0-9]+$/;
          var sym = regExp.test(password1_value);
          if(!sym){}
          else{
            password1span.innerText= "密碼至少且必須由數字和字符組成";
          }
        }
      }
    }
    password1.onfocus = function (){
      if(password1span.innerText!=""){
        password1.value="";
      }
      password1span.innerText="";
    }
    var password2span = document.getElementById("passwordError2");
    var password2 = document.getElementById("password2");
    password2.onblur = function(){
      var password1_value = password1.value;
      var password2_value = password2.value;
      if(password2_value===password1_value){
        password2span.innerText = "";
      }else{
        password2span.innerText = "二次密碼不一致";
      }
    }
    password2.onfocus = function (){
      if(password2span.innerText!=""){
        password2.value="";
      }
      password2span.innerText="";
    }
    var email = document.getElementById("email");
    var emailspan = document.getElementById("emailError");
    email.onblur = function (){
      var email_value = email.value;
      var email_regExp  =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      var sym = email_regExp.test(email_value);
      if(sym){
      }else{
        emailspan.innerText = "郵箱不符合規范";
      }
    }
    email.onfocus = function (){
      if(emailspan.innerText!= ""){
        email.value="";
      }
      emailspan.innerText="";
    }

    var Submit_btn = document.getElementById("submit_btn");
    Submit_btn.onclick = function (){
      usernameError.focus();
      usernameError.blur();
      password1.focus();
      password1.blur()![在這里插入圖片描述](https://img-blog.csdnimg.cn/20201103145018686.gif#pic_center)
;
      password2.focus();
      password2.blur();
      email.focus();
      email.blur();
      if(usernameSpan.innerText==""&&password1span.innerText==""&&password2span.innerText==""&&emailspan.innerText==""){
//無紅字
        alert("開始注冊");
        var User_form = document.getElementById("User");
        //User_form.hidden;
        User_form.submit();
      }
    }
  }

</script>
<div align="center">//放置中心
  <img data-v-a363f012="" data-v-796309f8="" src="https://cdn.luogu.com.cn/fe/logo.png?35e6d0796eab39c4bf304d03e6d332c0" class="logo"><br>
  <span data-v-a363f012="" data-v-796309f8="" class="motto">在洛谷，享受 Coding 的歡樂！</span>
<form id = "User" action="http://localhost:88/doRegister.jsp"  method="post">
  用戶名<input type= "text" name = "username" id= "username" /><span id = "usernameError"></span><br>
  <span data-v-a363f012="" data-v-796309f8="" class="motto">使用 6 個或更多字符（字母、數字的組合）</span><br>
  密碼 <input type="password" name = "password1" id = "password1" /><span id = "passwordError1"></span><br>
  確認密碼<input type="password"  id = "password2" /><span id = "passwordError2"></span><br>
  <select id="sexValue" name="selectSex">
    <option value="">-->請選擇性別<--</option>
    <option value="1">男性</option>
    <option value="0">女性</option>
  </select><br>
  電子郵箱<input type="text" name = "email" id = "email" /><span id = "emailError"></span><br>
  <input type="button" value=" 注冊" id ="submit_btn"/>
  <input type="reset" value="重置"/>
</form>
</div>
</body>
</html>

源代碼

GIthub主頁選擇Javaweb中web檔案夾
在這里插入圖片描述

如果有所幫助的話，不嫌麻煩的話可以點個贊，進github點個star

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/203360.html

標籤：其他

上一篇：session機制和原理

下一篇：Spring的爬坑之路（五）XML的驗證模式