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), ...
随机推荐
- Web前端研发工程师编程能力飞升之路
今天看到这篇文章.写的非常有意思,于是转载了.看看我们都处于什么的阶段. [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着 ...
- HDU 5102 The K-th Distance
题意:给你n-1条边,然后没两个节点的距离按照递增的顺序,求出前k项的和. 官方题解: 把所有边(u,v) 以及(v,u)放入一个队列,队列每弹出一个元素(u,v),对于所有与u相邻的点w,如果w!= ...
- java 为啥变量名前要加个m?
用m_开头表示类的成员变量,member的意思如果是全局变量,则由g_开头还有常量c_开头 静态变量s_开头
- java 8-6 抽象的练习
1. 猫狗案例 具体事物:猫,狗 共性:姓名,年龄,吃饭 分析:从具体到抽象 猫: 成员变量:姓名,年龄 构造方法:无参,带参 成员方法:吃饭(猫吃鱼) 狗: 成员变量:姓名,年龄 构造方法:无参,带 ...
- java 14 - 8 DateFormat
A.有时候在网站注册账号时,会有日期选项,下面会有一个小型的日历可供选择.这个日期其实是个String类, 选择了日期之后,这个String类会通过程序,转换为Date类,再存入数据库中. B.反之, ...
- linux下的zip命令
1.把/home目录下面的mydata目录压缩为mydata.zipzip -r mydata.zip mydata #压缩mydata目录2.把/home目录下面的mydata.zip解压到myda ...
- C语言 const常量讲解
//const的本质 //const本质上是伪常量,无法用于数组初始化以及全局变量初始化 //原因在于const仅仅限定变量无法直接赋值,但是却可以通过指针间接赋值 //例如局部常量在栈区,而不在静态 ...
- Linux经常用到的命令
1. Linux下用vim打开配置文件乱码,在终端输入:“LANG=”即可. 2. 查看端口是否被占用: 3. netstat -anp | grep port netstat -ltn 4. lso ...
- WCF4.0 –- RESTful WCF Services (1) (入门)
WCF 很好的支持了 REST 的开发, 而 RESTful 的服务通常是架构层面上的考虑. 因为它天生就具有很好的跨平台跨语言的集成能力,几乎所有的语言和网络平台都支持 HTTP 请求,无需去实现复 ...
- Android 获取手机Mac地址，手机名称
/** * 获取手机mac地址<br/> * 错误返回12个0 */ public static String getMacAddress(Context context) { // 获取 ...