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.0window.open(theURL,winName,features);
}
</script>
</head><body>
<div id="apDiv1"><p class="titleForm">DYF最新 测试系统</p>
</div>
<div id="apDiv2"><p>&nbsp;</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>&nbsp;</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">&nbsp;</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">&nbsp; </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">&nbsp;</td><td><div align="center"><input name="login" type="submit" class="buttonForm" id="login" value="注册" /></div></td><td>&nbsp;</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;  }
}

<%@ 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">&nbsp;</p><div id="apDiv2"><p class="titleForm">DYF最新 测试系统</p></div><p class="titleForm">&nbsp;</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">&nbsp;</td><td><label for="item"></label><label for="iterm"></label>            <div align="center"><input type="checkbox" name="item" id="item" />我已阅读并同意服务条款 </div>          </td><td>&nbsp;</td></tr><form action="successfully_registered.jsp" method="post" onSubmit="return checkAll()"><tr><td height="66">&nbsp;</td><td><div align="center"><input name="login" type="submit" class="buttonForm" id="login" value="注册" /></div></td><td>&nbsp;</td></tr></form></table><p align="center">&nbsp;</p></div></div><div id="apDiv8"><p>&nbsp;</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初学者一些帮助。

JavaEE学习之jsp编写登陆注册页面相关推荐

jsp mysql登录注册实验报告_登陆注册页面实验报告.doc
登陆注册页面实验报告兰州理工大学二.数据库设计本系统采用mysql数据库,只有一个表:数据表userinfoinfo用来存储后台会员名称,密码和基本资料. 2.1用户信息表: 下面是用户信息表表 ...
用java写注册表单_利用HTML表单标签编写一个注册页面
今天我们来写一个注册页面 form表单先来利用表单标签制作一个简单的注册页面,给大家说说标签的结构: 页面结构大体就是这样子的~ 利用HTML表单标签编写一个注册页面表单标签: 所有需要提交到服务 ...
12月11日，12月12日登陆注册页面的进度
12月11日晚抽出时间读学姐给的登录注册页面代码,有不懂的地方就百度,基本搞清楚了点登陆注册页面的基本框架和元素的作用.重点学习了<input><button><for ...
图书管理系统之登陆注册页面布局（一）
图书管理系统之登陆注册页面布局(一) 相关源码下载连接:https://download.csdn.net/download/baidu_39378193/85033291 前言,创建一个新的MVC项 ...
html制作登陆注册页面
html制作登陆注册页面源代码如下 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
python 登陆注册页面练习
文章目录一.英雄联盟登陆二.md5盐值登陆注册页面一.英雄联盟登陆 import random while True:print("\t\t\t英雄联盟商城界面\n")pri ...
javaweb 登陆注册页面
视图的数据修改,表中也修改引用工具类用<%@ page import=""%> <%@ page import="java.util.Date&quo ...
PHP实现简单登陆注册页面
PS:个人学习记录数据库设置: login.html: <!DOCTYPE html> <html><head><meta charset = " ...
小汤学编程之JavaEE学习day03——JSP组成结构、JSP原理、JSP生命周期、JSP九大内置对象、四大作用域、JSP的MVC模式
一.JSP组成结构二.JSP的原理 1.JSP的运行原理 2.分析JSP所生成的Servlet代码 3.JSP的执行过程三.JSP生命周期四.JSP九大内置对象五.JSP四大作 ...

JavaEE学习之jsp编写登陆注册页面

JavaEE学习之jsp编写登陆注册页面

准备–页面布局

HTML–>jsp

改写login.js

改写register.jsp

小结

JavaEE学习之jsp编写登陆注册页面相关推荐

最新文章

热门文章