JavaWeb實驗一：jsp簡單註冊頁面

阿新 • • 發佈：2019-02-08

編寫一個使用者註冊介面。

實現使用者登入功能

1、登入頁面

設計實現一個使用者註冊頁面，使用表單進行提交。頁面應包含的元素如圖2-1所示，注意選取適當的輸入元素型別，並對其命名；表單的action屬性課設定為空。

圖2-1 使用者註冊頁面元素

2、實現使用者輸入資訊的校驗

利用JavaScript或者jQuery等完成頁面元素合法性的校驗，例如當用戶輸入的姓名不符合要求的情況，一旦滑鼠離開姓名輸入框，則後面的文字變為紅色；反之當用戶輸入的姓名符合要求時，滑鼠離開姓名框則後面的文字變為綠色。

圖2-2 輸入合法性校驗

當用戶點選“註冊按鈕”時，仍能夠對頁面中的元素的合法性進行校驗。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	function checkForm() {
		checkName();
		checkPassword();
		checkEmail();
		checkTel();
		checkTrueName();
		checkProvince();
	}
	function checkName() {

		var username = document.getElementById("username").value;
		if (username.length<3 || username.lenth>5) {
			document.getElementById("name_Span").innerHTML = "<em style = 'color:#EF0000'>使用者名稱由3-5個字元組成</em>";
			document.getElementById("username").focus();
		} else
			document.getElementById("name_Span").innerHTML = "<em style = 'color:#008000'>使用者名稱由3-5個字元組成</em>";
	}

	function checkPassword() {

		var password = document.getElementById("password").value;
		if (password.length<8 || password.lenth>12) {
			document.getElementById("password_Span").innerHTML = "<em style = 'color:#EF0000'>請輸入8-12位密碼</em>";
			document.getElementById("password").focus();
		} else
			document.getElementById("password_Span").innerHTML = "<em style = 'color:#008000'>請輸入8-12位密碼</em>";

		var pwdRept = document.getElementById("pwdRept").value;
		if (pwdRept != password) {
			document.getElementById("pwdRept_Span").innerHTML = "<em style = 'color:#EF0000'>兩次密碼不一致</em>";
			document.getElementById("pwdRept").focus();
		}

		else
			document.getElementById("pwdRept_Span").innerHTML = "<em style = 'color:#008000'>兩次密碼不一致</em>";
	}

	function checkEmail() {

		var email = document.getElementById("email").value;

		var pattern = /^[a-zA-Z0-9#_\^\$\.\+\-\?\=\!\|\:\\\/\(\)\[\]\{\}] 
[email protected][a-zA-Z0-9]+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;

		if (email.length == 0 || !pattern.test(email)) {
			document.getElementById("email_Span").innerHTML = "<em style = 'color:#EF0000'>格式示例:[email protected]</em>";
			document.getElementById("email").focus();
		}

		else
			document.getElementById("email_Span").innerHTML = "<em style = 'color:#008000'>格式示例: 
[email protected]</em>";
	}

	function checkTel() {

		var tel = document.getElementById("tel").value;

		var phone_reg = /^1[3|4|5|7|8]\d{9}$/; //正則表示式

		if (tel.length == 0 || !phone_reg.test(tel)) {
			document.getElementById("tel_Span").innerHTML = "<em style = 'color:#EF0000'>格式示例:13800154200</em>";
			document.getElementById("tel").focus();
		} else
			document.getElementById("tel_Span").innerHTML = "<em style = 'color:#008000'>格式示例:13800154200</em>";
	}

	function checkTrueName() {

		var name = document.getElementById("trueName").value;
		var true_reg = /^[\u4e00-\u9fa5]{2,5}$/;
		if (!true_reg.test(name)) {
			document.getElementById("trueName_Span").innerHTML = "<em style = 'color:#EF0000'>由2-5箇中文組成</em>";
			document.getElementById("trueName").focus();
		}

		else
			document.getElementById("trueName_Span").innerHTML = "<em style = 'color:#008000'>由2-5箇中文組成</em>";
	}

	function checkProvince() {

		var pve = document.getElementById("province").value;
		if (pve.length < 1 || pve == "0")
			document.getElementById("province_Span").innerHTML = "<em style = 'color:#EF0000'>請選擇省份</em>";
		else
			document.getElementById("province_Span").innerHTML = "<em style = 'color:#008000'>請選擇省份</em>";
	}
</script>
<style type="text/css">
#txtRight {
	width: 80px;
	float: left;
	text-align: right;
}

#txtInput {
	width: 100px;
	text-align: left;
}

#province {
	width: 100px;
}

#major {
	width: 400px
}
</style>
</head>
<body>
	<center>

		<form onSubmit="checkForm()">
			<table >
				<tr>
					<td class="required" id="txtRight"><font color='red'>*</font>使用者名稱:</td>
					<td id="txtInput"><input type="text" id="username"
						onblur="checkName()" /></td>
					<td><span id="name_Span">使用者名稱由3-5位字元組成</span></td>
				</tr>

				<tr>
					<td id="txtRight"><font color='red'>*</font>密碼:</td>
					<td id="txtInput"><input type="password" id="password"
						onblur="checkPassword()" /></td>
					<td><span id="password_Span">請輸入8-12位密碼</span></td>
				</tr>

				<tr>
					<td id="txtRight"><font color='red'>*</font>確認密碼:</td>
					<td id="txtInput"><input type="password" id="pwdRept"
						onblur="checkPassword()" /></td>
					<td><span id="pwdRept_Span">兩次密碼不一致</span></td>
				</tr>

				<tr>
					<td id="txtRight"><font color='red'>*</font>Email:</td>
					<td id="txtInput"><input type="email" id="email"
						onblur="checkEmail()" /></td>
					<td><span id="email_Span">格式示例:[email protected]</span></td>
				</tr>

				<tr>
					<td id="txtRight"><font color='red'>*</font>手機號碼:</td>
					<td id="txtInput"><input type="text" maxlength="11" id="tel"
						onblur="checkTel()" /></td>
					<td><span id="tel_Span">格式示例:13800154200</span></td>
				</tr>

				<tr>
					<td id="txtRight"><font color='red'>*</font>真實姓名:</td>
					<td id="txtInput"><input type="text" id="trueName"
						onblur="checkTrueName()" /></td>
					<td><span id="trueName_Span">由2-5箇中文組成</span></td>
				</tr>

				<tr>
					<td id="txtRight"><font color='red'>*</font>省份:</td>
					<td colspan="2"><select id="province"
						onChange="checkProvince()">
							<option value="0">請選擇</option>
							<option value="北京">北京</option>
							<option value="天津">天津</option>
							<option value="天津">天津</option>
							<option value="上海">上海</option>
							<option value="重慶">重慶</option>
					</select> <span id="province_Span">請選擇省份</span></td>
				</tr>

				<tr>
					<td id="txtRight"><font color='red'>*</font>技術方向:</td>
					<td id="major" colspan="2"><input type="radio" name="major"
						value="Java" checked />Java <input type="radio" name="major"
						value=".Net" />.Net <input type="radio" name="major" value="PHP" />PHP
						<input type="radio" name="major" value="網頁" />網頁 <input
						type="radio" name="major" value="IOS" />IOS <input type="radio"
						name="major" value="Android" />Android</td>
				</tr>

				<tr>
					<td colspan="3" align="center"><input type="submit" value="註冊">
						<input type="reset" value="重置"></td>

				</tr>
			</table>
		</form>
	</center>
</body>
</html>

JavaWeb實驗一：jsp簡單註冊頁面

編寫一個使用者註冊介面。實現使用者登入功能 1、登入頁面設計實現一個使用者註冊頁面，使用表單進行提交。頁面應包含的元素如圖2-1所示，注意選取適當的輸入元素型別，並對其命名；表單的action屬性課設定為空。圖2-1 使用者註冊頁面元素 2、實現使用

初學html，任務1：一個簡單html頁面，要求：內容頁面裝一篇文章用html來分段

enter pos 工程師分享圖片 visit 技術運行並且 center 這是主要內容部分，用html實現版塊分布。接下來是樣式部分。讓頁面所有元素的padding和margin都設置為0 ；否則加入一張大的覆蓋的背景圖片後，會由於瀏覽器的緣故，圖片周邊有

SDUT-2772_數據結構實驗之串一：KMP簡單應用

strlen out else 結構 ddd http ref limit script 數據結構實驗之串一：KMP簡單應用 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 給定兩個字符串str

Java基礎實驗一：簡單資料型別和流程控制

1．實驗目的掌握識別符號的定義規則、表示式的組成、各種資料型別及其使用方法、各種運算子的使用及其優先順序控制。掌握分支結構，迴圈結構，continue，break，語句標號等內容。 2．實驗內容（1）輸入一個三角形的3個邊長，檢查是否能構成一個直角三角形。（2）任意從鍵盤輸入一個0到

資料結構實驗之串一：KMP簡單應用

Problem Description 給定兩個字串string1和string2，判斷string2是否為string1的子串。 Input 輸入包含多組資料，每組測試資料包含兩行，第一行代表string1(長度小於1000000)，第二行代表string2（長度小

Java基礎實驗一：簡單資料型別和流程控制

1．實驗目的掌握識別符號的定義規則、表示式的組成、各種資料型別及其使用方法、各種運算子的使用及其優先順序控制。掌握分支結構，迴圈結構，continue，break，語句標號等內容。 2．實驗內容（1）輸入一個三角形的3個邊長，檢查是否能構成一個直角三角形。（2）任意

JavaBean簡單介紹與使用（例項：JSP+JavaBean註冊驗證）

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getSchem

實驗一：實驗環境配置與使用

png 黃色變化 gdb調試操作分析對比 spa -c 一、實驗目標：熟悉Linux上C程序的編譯和調試工具，包括以下內容： 1. 了解Linux操作系統及其常用命令 2. 掌握編譯工具gcc的基本用法 3. 掌握使用gdb進行程序調試二、實驗環境與工件

JavaWeb（一）JSP原理，組成

方法 XML spa 動態服務器 enc 頁面跳轉 htm tom JSP（Java sever pages）：一種用於開發動態web頁面（資源）的技術。 jsp頁面是在服務器上運行的一個頁面，一個jsp頁面就是一個類。寫jsp就像在寫html，jsp允許在頁面中編寫ja

實驗一：搭建動態論壇（ASP+ACCESS）

搭建動態論壇（ASP+ACCESS）實驗一：搭建動態論壇（ASP+ACCESS）實驗目的：在搭建好的論壇上新創建一個用戶，能夠讓這個用戶發帖實驗準備：一臺server，一臺client 實驗情景：搭建一個web網站，把寫好的asp文件導入到web的目錄路徑下，能夠讓用戶訪問web，及讓用戶發送帖子實驗過程

SDN控制器之OVN實驗一：介紹和安裝OVN

OVN概覽 OVN是由開發出OVS的那群出色的程式設計師們的另一個優秀的作品。這個網路虛擬化專案從2015初宣告啟動，到不久前才釋出第一個正式版本OVN 2.6 。在這篇文章中，我會配置一個簡單示例：在三個主機之間配置一個layer-2 overlay網路。首先講一下OVN工作機制中的2種

2018-2019-1 《資訊安全系統設計基礎》實驗一：開發環境的熟悉--實驗報告

2018-2019-1 《資訊安全系統設計基礎》實驗一：開發環境的熟悉--實驗報告小組成員：20165221 譚笑 20165225 王高源模組一：交叉編譯環境可以使用自己的筆記本，也可以使用實驗室桌上型電腦，* 如附圖，開機時按F12，進入系統BIOS中，開啟虛擬化功能

20165231 20165232 20165235 實驗一：開發環境的熟悉

2018-2019-1 20165231 20165232 20165235 實驗一開發環境的熟悉任務一交叉編譯環境任務要求：實驗三人一組可以使用自己的筆記本，也可以使用實驗室桌上型電腦，使用實驗室機器的不用做本題安裝老師提供的software目錄中的“VMwar

資料結構實驗一：順序表的驗證實驗

#ifndef SeqList_H #define SeqList_H const int MaxSize=10; class SeqList { public: SeqList(){length=0;} SeqList(int a[],int n); ~SeqList(){} v

ensp--實驗一：靜態路由

實驗一：靜態路由一、拓撲圖如下：二、在各路由器及PC端進行配置，如下為各路由器配置資訊； R1 1、介面配置IP地址： [R1]interface GigabitEthernet0/0/0 [R1-GigabitEthernet0/0/0]ip address 192.168.12

服務計算課程實驗一：使用 VirtualBox 讓 PC 提供雲桌面服務

實驗目標學習瞭解虛擬化技術，理解雲端計算的相關概念搭建私有云，為後續課程提供統一的程式設計與實驗環境配置虛擬機器的開發環境實驗環境與工具 Oracke VM VirtualBox虛擬化軟體、Windows 10作業系統實驗

2018.9.10.Matlab實驗一：熟悉Matlab開發環境

一、實驗任務和目的 1. 熟悉Matlab的系統環境及基本操作方法。 2. 掌握Matlab的搜尋路徑及其設定方法。 3. 熟悉Matlab的幫助資訊的查閱方法。二、實驗內容 1. 熟悉 Matlab 工作介面的多個常用視窗的及使用方法。熟悉Co

Spring Cloud實戰(一)：微服務註冊與微服務發現

沒有Spring Cloud，Spring Boot的實用性要大打折扣。單個微服務雖然開發簡單、維護方便，但是沒有協作功能的微服務，其實在企業裡並沒有顯著的競爭力，跟NodeJS比起來，JAVA開發微服務並沒有多大的優勢。但是有了Spring Cloud，將多個微

springcloud學習筆記一：eureka服務註冊與發現

springcloud可以方便的幫我們完成微服務架構，它擁有多個子專案，可以去官網簡單看下介紹。其中component下的代表著現有的子專案，本次所記錄的eureka就是其中spring-cloud-netflix裡的一個模組。 eureka在我們微服務架構中實現的就是服務發現與

作業系統實驗一：linux核心編譯及新增系統呼叫

編譯環境 VMWare Ubuntu Desktop Ubuntu 18.04.1映象下載地址：點我下載裝ubuntu很簡單，網上教程一大堆，記憶體分配多點。新增系統呼叫步驟解壓linux核心想辦法，把上面的linux核心弄到ubuntu裡面，可

JavaWeb實驗一：jsp簡單註冊頁面

相關推薦