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), ...
随机推荐
- codeforces 719E E. Sasha and Array(线段树)
题目链接: E. Sasha and Array time limit per test 5 seconds memory limit per test 256 megabytes input sta ...
- 怎样在python中获取时间？
from time import strftime date = strftime('%y%m%d') hour = strftime('%H%M%S')
- SSO - 我们为何需要单点登录系统
SSO,Single Sign On,也就是单点登录,保证一个账户在多个系统上实现单一用户的登录 现在随着网站的壮大,很多服务会进行拆分,会做SOA服务,会使用dubbo做微服务,或者简单的小型分布式 ...
- 在Android Studio中使用shareSDK进行社会化分享（图文教程）
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
- 18Spring_AOP编程(AspectJ)_AspectJ的各种通知总结
小结: 前置通知(权限控制). 后置通知 ---- 不怎么用 环绕通知(权限控制. 性能监控. 缓存技术 ) 异常通知 (发生异常后, 记录错误日志 ) 最终通知 (释放资源 ) 环绕通知 是取代任何 ...
- 装系统提示缺少所需的CD/DVD驱动器设备驱动程序
昨晚用ultraISO和win7 旗舰版(ultimate)的镜像做了个启动U盘,插在自己新电脑上安装过程中提示“缺少所需的CD/DVD驱动器设备驱动程序”,用网上的很多办法都不行,最后找官网的客服问 ...
- php基础15：表单验证
<?php $nameError=$emailError=$genderError=$websiteError=""; $name=$email=$gender=$comme ...
- sqlalchemy 的 Core 方式使用示例
知乎: sqlalchemy 的 Core 方式操作数据是一种怎样的体验? 答: 爽! 本文基于:win 10 + python 3.4 + sqlalchemy 1.0.13 基本步骤如下: 1. ...
- Android EventBus源码解析 带你深入理解EventBus
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40920453,本文出自:[张鸿洋的博客] 上一篇带大家初步了解了EventBus ...
- VS2010报错无法编译：LINK : fatal error LNK1123: failure during conversion to COFF: file invalid
win7 64位 专业版 + vs2010 从vc6.0下转过来的一个项目,突然遇到这个问题. 解决方案: 用C:\Windows\winsxs\x86_netfx-cvtres_for_vc_and ...