JavaScript、CSS、JSP 实现用户注册页面与信息校验
参考：http://blog.csdn.net/fightfaith/article/details/50277337
需求：实现用户注册页面并作出逻辑校验。要求：
（1）完成注册页面样式如下：
（2）页面提交，用户注册信息不符合规范，要显示红色提示框，如下：
分析：JSP实现页面元素，CSS做页面美化，JavaScript 实现逻辑校验；用户注册规则采用正则表达式。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>注册页面</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link type="text/css" rel="stylesheet" href="register.css">
<script type="text/javascript" src="register.js"></script>
</head> <body>
<form action="UserServlet?method=register" method="post"
onsubmit="return validateForm()">
<table border="26" align="center" width="50%">
<caption>
用户注册
</caption>
<tr>
<td align="right">
<sup>
<font color="red">*</font>
</sup>
用户名：
</td>
<td>
<input type="text" name="username" id="username"
class="input_class" onblur="checkusername(this)" />
<span id="username_span">用户名由3-5个字符组成</span>
</td>
</tr> <tr>
<td align="right">
<sup>
<font color="red">*</font>
</sup>
密码：
</td>
<td>
<input type="password" name="password1" id="password1"
class="input_class" onblur="checkpassword1(this)" />
<span id="password1_span">请输入8-12位密码</span>
</td>
</tr> <tr>
<td align="right">
<sup>
<font color="red">*</font>
</sup>
确认密码：
</td>
<td>
<input type="password" name="password2" id="password2"
class="input_class" onblur="checkpassword2(this)" />
<span id="password2_span">两次密码不一致</span>
</td>
</tr> <tr>
<td align="right">
<sup>
<font color="red">*</font>
</sup>
Email：
</td>
<td>
<input type="text" name="email" id="email" class="input_class"
onblur="checkemail(this)" />
<span id="email_span">格式示例：xxxxxxxx@163.com</span>
</td>
</tr> <tr>
<td align="center" colspan="2">
<!-- 合并两列 -->
<input type="submit" class="aaa" value="注册" />
<input type="reset" class="aaa" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
2、CSS进行页面美化。
在本文 CSS 代码中主要根据类选择器、标签选择器来设置相应的标签样式：
<span style="font-size:14px;">
.input_class {
width:250px;
height:16px;
} caption{
font-size:30px;
color:red;
text-shadow: yellow 6px 0px 5px;
font-stretch: wider;
font-weight:;
} .aaa{
font-size:16px;
font-weight: bold;
} </span>
3、JavaScript 进行逻辑校验。
在JavaScript 代码中需要用到正则表达式来简化验证：
//用户名：
var usernameRegex = /^\w{3,15}$/;
//密码：
var passwordRegex = /^\w{6,12}$/;
//邮箱：
var emailRegex = /^\w+@\w+(\.\w+)+$/; //alert("222");
function validateForm(){ //定义validateForm方法用于客户端校验
var flag = true;
//校验用户名
var usernameNode = byId("username"); //获得ID值为username的节点对象
var username = usernameNode.value; //获得usernameNode节点的值，即用户在username文本框内填写的值
if(!usernameRegex.test(username)){ //验证获得到的值是否符合正则表达式
byId("username_span").style.color = "red"; //如果不符合，则将ID值为username_span的节点对象内容变为红色
flag = false; //返回false，不提交
} //校验密码
var passwordNode = byId("password1"); //获得ID值为password的节点对象
var password = passwordNode.value;
if(!passwordRegex.test(password)){
byId("password1_span").style.color = "red";
flag = false;
} //确认密码
var rePasswordNode = byId("password2"); //获得ID值为rePassword的节点对象
var rePassword = rePasswordNode.value;
if(!password==rePassword){
byId("password2_span").style.color = "red";
flag = false;
}else if(!passwordRegex.test(rePassword)){
byId("password2_span").style.color = "red";
flag = false;
}else{
byId("password2_span").style.color = "green";
} //校验邮箱
var emailNode = byId("email"); //获得ID值为Email的节点对象
var email = emailNode.value;
if(!emailRegex.test(email)){
byId("email_span").style.color = "red";
flag = false;
}
return flag;
} function byId(id){ //自定义方法，用于获取传递过来的ID值对应的节点对象
return document.getElementById(id);
} function checkUsername(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
//校验用户名
var username = node.value; //得到传递过来的节点对象的值
if(!usernameRegex.test(username)){ //验证是否符合节点对应的正则表达式
byId("username_span").style.color = "red"; //不符合，相应内容变成红色
}else{
byId("username_span").style.color = "green"; //符合，相应内容变成绿色
}
} function checkPassword(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
//校验密码
var password1 = node.value;
//alert("111");
if (!passwordRegex.test(password)) {
byId("password1_span").style.color = "red";
}
else {
byId("password1_span").style.color = "green";
}
} function checkRePassword(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
//确认密码
var rePassword = node.value;
var password = byId("password2").value;
//alert(repassword+"***"+password);
if(!password==rePassword){
byId("rePassword2_span").style.color = "red";
}else if(!passwordRegex.test(rePassword)){
byId("rePassword2_span").style.color = "red";
}else{
byId("rePassword2_span").style.color = "green";
}
} function checkEmail(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
//校验邮箱
var email = node.value;
if(!emailRegex.test(email)){
byId("email_span").style.color = "red";
}else{
byId("email_span").style.color = "green";
}
}
JavaScript、CSS、JSP 实现用户注册页面与信息校验的更多相关文章
- 超详细的php用户注册页面填写信息完整实例（附源码）
这篇文章主要介绍了一个超详细的php用户注册页面填写信息完整实例,内容包括邮箱自动匹配.密码强度验证以及防止表单重复等,小编特别喜欢这篇文章,推荐给大家. 注册页面是大多数网站必备的页面,所以很有必要 ...
- [JavaScript] css将footer置于页面最底部
<!-- 父层 --> <div id="wapper"> <!-- 主要内容 --> <div id="main-conten ...
- 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）
通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...
- JavaScript、JSP、Java及javaEE
对JavaScript.JSP.Java及javaEE之间区别的理解 JavaScript和Java名字极为类似,相信不少的初学者或者准备学这些知识的人对于JavaScript.JSP.Java及Ja ...
- 新手详解JAVA+数据库+JSP完成简单页面
本篇以数据库添加为例(本例中数据库名为“xinxi”表单名字为“stud”) 准备---实体层: package entity; public class Student { private Stri ...
- YUI前端优化之javascript,css篇
三.JavaScript和CSS篇 JavaScript和CSS也是我们页面中经常用到的内容,对它们的优化也提高网站性能的重要方面:CSS:把样式表置于顶部避免使用CSS表达式(Expression) ...
- servlet+jsp update修改页面的实现，整整搞了两个小时才搞定
package DAO; public class books { private int bid; private String bname; private int booksl; private ...
- javascript、JSP、JS有什么区别和联系
js是javascript的缩写.以下是JSP与JS的区别和联系: 名字:JS:JavaScriptJSP:Java Server Pages 执行过程:JSP先翻译,翻译成Servlet执行如: t ...
- Javascript实现返回上一页面并刷新
今天写了一个小小的提示成功的页面,同时要求返回上一页面,并实现对上一页面的操作进行刷新(例如删除的,添加的),在网上搜寻了一遍,基本上90%的都是说的是用window.history.go(-1), ...
随机推荐
- 来说说SpringMVC + JSONP的跨域请求
先来说说场景,JSON,这货大家应该都懂,不懂的请自动面壁思过,那么什么是JSONP,不是JSON放了个P就叫JSONP,而是JSON with Padding,在进行跨域请求的时候需要的数据,什么是 ...
- Daikon Forge GUI 制作UI面板
因为是第一次写技术博客,文章的结构和层次估计不标准,但是并不妨碍我想表达的内容. DF-GUI知识 DF-GUI初窥 DF-GUI于今年10月份面世,作为为数不多的unity UI插件,其功能值得一窥 ...
- java11-5 String类的转换功能
String的转换功能: byte[] getBytes():把字符串转换为字节数组. char[] toCharArray():把字符串转换为字符数组. static String valueOf( ...
- HYSBZ 2145 悄悄话
2145: 悄悄话 Time Limit: 10 Sec Memory Limit: 259 MBSubmit: 271 Solved: 104[Submit][Status][Discuss] ...
- 023医疗项目-模块二：药品目录的导入导出-从数据库中查出数据用XSSF导出excel并存放在虚拟目录最后下载（包括调试）
我们要实现的效果: 进入到这个页面后,输入要查询的条件,查询出药品表的数据,然后按下导出按钮 ,就会在服务器的一个目录下生成一个药品表的excel表格. 点击"导出"之后 ...
- 理解SQL Server中的权限体系(下)----安全对象和权限
原文:http://www.cnblogs.com/CareySon/archive/2012/04/12/SQL-Security-SecurableAndPermission.html 在开始阅读 ...
- 多线程BackgroundWorker
链接:http://www.cnblogs.com/yiyisawa/archive/2008/11/24/1339826.html 周六闲来无事,学习了多线程BackgroundWorker,以此记 ...
- 视频会议的3G智能手机移植技术
现今的视频会议系统已经兼容3G手机等移动终端设备,而3G智能手机使用的操作系统一般与PC的操作系统不一样,其开发环境一般都在PC上进行,通过模拟器在PC上进行手机系统的应用程序开发,而在这些操作系统上 ...
- google project tango 学习笔记
google io 2015上 project tango 的演示视频
- Apache Thrift
Baidu Thrift Google Thrift Apache Thrift - 可伸缩的跨语言服务开发框架