JavaEE学习之jsp编写登陆注册页面
刚开始学习javaee，好多东西需要一点点积累。最近用jsp和简单的JavaScript写的登录注册界面，简单做一下记录。
准备–页面布局
登录和注册界面的HTML全都是用Dreamweaver画的，具体步骤不再赘述，有需要的请自行查找资料。
- 页面布局基本是用的AP div，注册界面用到了表格；
- 在Dreamweaver中大概是如下效果
HTML–>jsp
- 首先我们在eclipse中建立一个Dynamic web project;
- 在WebContent文件夹下建立两个主要的jsp文件，login.jsp和register.jsp;
- 我们将Dreamweaver自动生成的HTML代码粘贴到jsp文件中;
- 另外再建四个测试用的jsp页面，ask_for_help.jsp, contact_us.jsp, homepage.jsp, successfully_register.jsp.
tomcat环境的配置本文不做赘述。
改写login.js
- 首先我们给 页面右上角的“首页 | 帮助中心 | 联系我们”添加链接，分别链接到homepage.jsp, ask_for_help.jsp, contact_us.jsp（可以简单实现三个jsp页面进行测试）
- 目前没有实现登录功能……
- login.jsp全部代码如下
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#apDiv1 {
position: absolute;
width: 572px;
height: 115px;
z-index: 1;
left: 249px;
top: 21px;
}
titleForm {
font-size: 18px;
font-weight: 300;
color: #000;
}
.titleForm {
font-size: 24px;
font-weight: 600;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.middleForm {
background-image: url(image/back.png);
background-position: center center;
}
.loginForm {
background-color: #FFF;
}
#apDiv2 {
position: absolute;
width: 200px;
height: 35px;
z-index: 2;
left: 1121px;
top: 3px;
}
#apDiv3 {
position: absolute;
width: 1485px;
height: 711px;
z-index: 3;
left: 6px;
top: 105px;
}
.textForm {
height: 40px;
width: 300px;
background-color: #FFF;
}
.buttonForm {
background-color: #39F;
height: 40px;
width: 300px;
color: #FFF;
font-size: 16px;
}
#apDiv4 {
position: absolute;
width: 349px;
height: 430px;
z-index: 4;
left: 831px;
top: 66px;
}
#apDiv5 {
position: absolute;
width: 328px;
height: 490px;
z-index: 1;
left: 109px;
top: 73px;
}
#apDiv6 {
position: absolute;
width: 328px;
height: 87px;
z-index: 1;
}
#apDiv7 {
position: absolute;
width: 326px;
height: 377px;
z-index: 2;
left: 1px;
top: 97px;
}
#apDiv8 {
position: absolute;
width: 200px;
height: 27px;
z-index: 4;
left: 113px;
top: 198px;
}
.linkForm {
text-decoration: underline;
}
a:link{
color:black;
text-decoration:none; /*超链接无下划线*/
}
a:hover{
text-decoration:underline; /*鼠标放上去有下划线*/
}
</style>
<script type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
</script>
</head>
<body>
<div id="apDiv1">
<p class="titleForm">DYF最新 测试系统</p>
</div>
<div id="apDiv2">
<p> </p>
<p>
<a href="homepage.jsp" value="首页">首页</a>
|
<a href="ask_for_help.jsp" value="帮助中心">帮助中心</a>
|
<a href="contact_us.jsp" value="联系我们">联系我们</a> </p>
</div>
<div class="middleForm" id="apDiv3">
<div class="loginForm" id="apDiv5">
<div id="apDiv6">
<div align="center">
<p> </p>
<p class="titleForm">登录</p>
</div>
</div>
<div id="apDiv7">
<p align="center">
<label for="username"></label>
<input name="username" type="text" class="textForm" id="username" placeholder="用户名"/>
</p>
<p align="center">
<label for="password"></label>
<input name="password" type="text" class="textForm" id="password" placeholder="密码" />
</p>
<p align="center">
<input name="login" type="submit" class="buttonForm" id="login" value="登录" />
</p>
<p align="right"> </p>
<div id="apDiv8">
<div align="right"><a href="register.jsp" value="注册">注册</a></div>
<!-- <a href="#" style="color:black;text-decoration:none;" >测试超链接</a> -->
</div>
<p align="right"> </p>
</div>
</div>
</div>
</body>
</html>
改写register.jsp
- 首先我们讲到两个函数οnblur=" “和οnfοcus=” ";
onblur，当用户离开input输入框时执行一段Javascript代码；
onfocus，当 input 输入框获取焦点时执行一段 Javascript代码； - 改写input标签
以手机号为例
input标签是输入手机号的文本框；
当文本框被点击（获取焦点）时执行phoneNumberTip()函数；
当文本框被点击并且取消焦点（即鼠标离开后）执行checkPhoneNumber()函数；
<tr>
<td width="153"><div align="right">手机号 </div></td>
<td width="312"><div align="center">
<input name="phoneNumber" type="text" class="textForm" id="phoneNumber" onblur="checkPhoneNumber()" onfocus="phoneNumberTip()"/>
</div></td>
<td width="449"> <span style="font-size:13px;color:red" id="phoneNumberSpan"></span> </td>
</tr>
- phoneNumberTip()函数实现
该函数实现了当文本框被点击时，span标签赋值并显示 ”请输入11位手机号码，仅支持大陆地区手机号。“
颜色为黑色。
function phoneNumberTip(){
var spanNode = document.getElementById("phoneNumberSpan");
spanNode.innerHTML = "请输入11位手机号码，仅支持大陆地区手机号。".fontcolor("black");//.fontcolor("red");
}
- checkPhoneNumber()函数
该函数实现了当鼠标从文本框移开时，通过正则表达式检验手机号码输入是否符合标准；
若文本框为空，则span标签提示”请输入手机号！“；
若文本框不为空但手机号码格式不正确，span标签提示”手机号码格式不正确，请重新填写！“；
若文本框内手机号码符合正则表达式格式，则span标签提示”手机号码格式正确“。
function checkPhoneNumber(){
var x=document.getElementById("phoneNumber").value;
var spanNode = document.getElementById("phoneNumberSpan");
if(x==""|x==null){
spanNode.innerHTML = "请输入手机号码！";//.fontcolor("red");
return false;
}
else if(!/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/.test(x)){
spanNode.innerHTML = "手机号码格式不正确，请重新填写！";//.fontcolor("red");
return false;
}else{
spanNode.innerHTML = "手机号码格式正确".fontcolor("black");
return true;
}
}
- 其他标签及函数思想大同小异，不再赘述
- 提交表单函数判断
这里用form action来提交表单，提交过程中执行checkAll()函数
<form action="successfully_registered.jsp" method="post" onSubmit="return checkAll()">
<tr>
<td height="66"> </td>
<td><div align="center">
<input name="login" type="submit" class="buttonForm" id="login" value="注册" />
</div></td>
<td> </td>
</tr>
</form>
- checkAll()函数
checkAll()函数判断之前的验证是否都通过；
若都通过则注册成功；
若有验证未通过，则提示ERROR！
function checkAll(){
var email = checkEmail();
var name = checkName();
var phoneNumber = checkPhoneNumber();
var password = checkPassword();
var confirm = confirmPassword();
if(email&&name&&phoneNumber&&password&&confirm){
return true;
}else{
alert("ERROR!")
return false;
}
}
- register.jsp 全部代码如下
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function checkPhoneNumber(){
var x=document.getElementById("phoneNumber").value;
var spanNode = document.getElementById("phoneNumberSpan");
if(x==""|x==null){
spanNode.innerHTML = "请输入手机号码！";//.fontcolor("red");
return false;
}
else if(!/^(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/.test(x)){
spanNode.innerHTML = "手机号码格式不正确，请重新填写！";//.fontcolor("red");
return false;
}else{
spanNode.innerHTML = "手机号码格式正确".fontcolor("black");
return true;
}
}
function checkPassword(){
var x=document.getElementById("password").value;
var spanNode = document.getElementById("passwordSpan");
var regex = new RegExp('(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,16}');
if(x==""|x==null){
spanNode.innerHTML = "请输入密码！";//.fontcolor("red");
return false;
}
else if (!regex.test(x)) {
spanNode.innerHTML = "密码中必须包含大小写字母、数字、特殊字符！8-16位";//.fontcolor("red");
return false;
}
else{
spanNode.innerHTML = "密码格式正确！".fontcolor("black");
return true;
}
}
function confirmPassword(){
var x=document.getElementById("confirmPassword").value;
var y=document.getElementById("password").value;
var spanNode = document.getElementById("confirmPasswordSpan");
var regex = new RegExp('(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,16}');
if(x==""|x==null){
spanNode.innerHTML = "请再次输入密码";//.fontcolor("red");
return false;
}
else if (!regex.test(x)) {
spanNode.innerHTML = "密码格式不正确！";//.fontcolor("red");
return false;
}
else if(x!=y){
spanNode.innerHTML = "密码不一致！";//.fontcolor("red");
return false;
}
else{
spanNode.innerHTML = "密码输入正确！".fontcolor("black");//.fontcolor("red");
return true;
}
}
function checkName(){
var x=document.getElementById("name").value;
var spanNode = document.getElementById("nameSpan");
if(x==""|x==null){
spanNode.innerHTML = "个人姓名不能为空！";//.fontcolor("red");
return false;
}
return true;
}
function checkEmail(){
var x=document.getElementById("mail").value;
var spanNode = document.getElementById("mailSpan");
var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
if(re.test(x)){
spanNode.innerHTML = "邮箱正确。".fontcolor("black");
return true;
}else{
spanNode.innerHTML = "请输入正确的邮箱！";
return false;
}
}
function checkAll(){
var email = checkEmail();
var name = checkName();
var phoneNumber = checkPhoneNumber();
var password = checkPassword();
var confirm = confirmPassword();
if(email&&name&&phoneNumber&&password&&confirm){
return true;
}else{
alert("ERROR!")
return false;
}
}
function phoneNumberTip(){
var spanNode = document.getElementById("phoneNumberSpan");
spanNode.innerHTML = "请输入11位手机号码，仅支持大陆地区手机号。".fontcolor("black");//.fontcolor("red");
}
function passwordTip(){
var spanNode = document.getElementById("passwordSpan");
spanNode.innerHTML = "请输入8-16位密码，需包含大小写字母、数字、特殊字符。".fontcolor("black");
}
function confirmPasswordTip(){
var spanNode = document.getElementById("confirmPasswordSpan");
spanNode.innerHTML = "请再次填写一遍密码，以辅助监测密码是否输入正确。".fontcolor("black");
}
function nameTip(){
var spanNode = document.getElementById("nameSpan");
spanNode.innerHTML = "请输入个人姓名。".fontcolor("black");
}
function checkEmailTip(){
var spanNode = document.getElementById("mailSpan");
spanNode.innerHTML = "请设定一个安全邮箱，忘记密码时可通过此邮箱找回密码。".fontcolor("black");
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#apDiv1 {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
left: 9px;
}
.titleForm { font-size: 24px;
font-weight: 600;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#apDiv2 {
position: absolute;
width: 364px;
height: 48px;
z-index: 2;
left: 56px;
top: 33px;
}
#apDiv3 {
position: absolute;
width: 200px;
height: 61px;
z-index: 2;
left: 440px;
top: 17px;
}
.title2Form {
font-size: 30px;
font-weight: 700;
}
.backForm {
background-image: none;
background-attachment: scroll;
background-position: center top;
background-color: #EFEFEF;
}
.back2Form {
background-color: #FFF;
}
#apDiv4 {
position: absolute;
width: 132px;
height: 73px;
z-index: 2;
left: 1328px;
top: 23px;
}
#apDiv5 {
position: absolute;
width: 1499px;
height: 788px;
z-index: 2;
top: 130px;
left: 7px;
}
#apDiv6 {
position: absolute;
width: 1368px;
height: 639px;
z-index: 1;
left: 58px;
top: 39px;
}
#apDiv7 {
position: absolute;
width: 1004px;
height: 589px;
z-index: 1;
left: 277px;
top: 17px;
}
.textForm {
height: 30px;
width: 300px;
background-color: #FFF;
}
.codeFomr {
height: 30px;
width: 150px;
}
.getCodeButtonForm {
height: 30px;
width: 140px;
z-index: auto;
left: auto;
top: auto;
right: auto;
bottom: auto;
position: fixed;
}
.buttonForm {
background-color: #3CF;
height: 40px;
width: 300px;
color: #FFF;
font-size: 16px;
}
#apDiv8 {
position: absolute;
width: 200px;
height: 115px;
z-index: 2;
left: 664px;
top: 634px;
}
#apDiv9 { position: absolute;
width: 200px;
height: 35px;
z-index: 2;
left: 1121px;
top: 3px;
}
</style>
</head>
<body>
<div id="apDiv1">
<div id="apDiv3">
<p class="title2Form">|用户注册</p>
</div>
<div id="apDiv4">
<p><a href = "homepage.jsp" value="首页">首页</a>
<a href = "login.jsp" value="登录">登录</a> </p>
</div>
<p class="titleForm"> </p>
<div id="apDiv2">
<p class="titleForm">DYF最新 测试系统</p>
</div>
<p class="titleForm"> </p>
</div>
<div class="backForm" id="apDiv5">
<div class="back2Form" id="apDiv6">
<div id="apDiv7">
<p align="center">
<label for="code"></label>
</p>
<table width="930" height="462">
<tr>
<td width="153"><div align="right">手机号 </div></td>
<td width="312"><div align="center">
<input name="phoneNumber" type="text" class="textForm" id="phoneNumber" onblur="checkPhoneNumber()" onfocus="phoneNumberTip()"/>
</div></td>
<td width="449"> <span style="font-size:13px;color:red" id="phoneNumberSpan"></span> </td>
</tr>
<tr>
<td><div align="right">短信验证码</div></td>
<td><div align="center">
<input name="code" type="text" class="codeFomr" id="code" />
<input name="getCode" type="submit" class="codeFomr" id="getCode" value="提交" />
</div></td>
<td>提示内容</td>
</tr>
<tr>
<td><div align="right">密码</div></td>
<td><label for="password"></label>
<div align="center">
<input name="password" type="text" class="textForm" id="password" onblur="checkPassword()" onfocus="passwordTip()"/>
</div></td>
<td width="449"> <span style="font-size:13px;color:red" id="passwordSpan"></span> </td>
</tr>
<tr>
<td><div align="right">密码确认</div></td>
<td><label for="confirmPassword"></label>
<div align="center">
<input name="confirmPassword" type="text" class="textForm" id="confirmPassword" onblur="confirmPassword()" onfocus="confirmPasswordTip()"/>
</div></td>
<td width="449"> <span style="font-size:13px;color:red" id="confirmPasswordSpan"></span> </td>
</tr>
<tr>
<td height="48"><div align="right">姓名</div></td>
<td class="textForm"><div align="center">
<input name="name" type="text" class="textForm" id="name" onblur="checkName()" onfocus="nameTip()" />
</div></td>
<td width="449"> <span style="font-size:13px;color:red" id="nameSpan"></span> </td>
</tr>
<tr>
<td><div align="right">安全邮箱</div></td>
<td><label for="mail"></label>
<div align="center">
<input name="mail" type="text" class="textForm" id="mail" onblur="checkEmail()" onfocus="checkEmailTip()" />
</div></td>
<td width="449"> <span style="font-size:13px;color:red" id="mailSpan"></span> </td>
</tr>
<tr>
<td height="53"> </td>
<td><label for="item"></label>
<label for="iterm"></label> <div align="center">
<input type="checkbox" name="item" id="item" />
我已阅读并同意服务条款
</div> </td>
<td> </td>
</tr>
<form action="successfully_registered.jsp" method="post" onSubmit="return checkAll()">
<tr>
<td height="66"> </td>
<td><div align="center">
<input name="login" type="submit" class="buttonForm" id="login" value="注册" />
</div></td>
<td> </td>
</tr>
</form>
</table>
<p align="center"> </p>
</div>
</div>
<div id="apDiv8">
<p> </p>
<p> <a href="homepage.jsp" value="首页">首页</a> | <a href="ask_for_help.jsp" value="帮助中心">帮助中心</a> | <a href="contact_us.jsp" value="联系我们">联系我们</a></p>
</div>
</div>
</body>
</html>
小结
-
这只是实现注册表单实时验证的一种方法；
-
本文所示可能存在很多不合理的地方没有考虑到；
比如：
在用Dreamweaver给页面布局时，布局大小用相对大小（百分比）而不是绝对大小（xxx px）更合适
而且例子中的正则表达式也不是很规范
密码没有用到隐藏显示。
（有关上述细节问题大家可以从其他地方找到更好的详细的吗解答方案，本例的重点还是侧重于表单实时验证的问题） -
但我只是想从这个例子中帮助自己记录学习的过程，同时希望能给Java EE初学者一些帮助。
1864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
