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), ...
随机推荐
- Start cluster zookeeper in shell script
cat start-zookeeper.sh #!bin/sh for node in namenode01 datanode01 datanode02 do echo "s ...
- 算法实践——Twitter算法面试题（积水问题）的线性时间解法
问题描述:在下图里我们有不同高度的挡板.这个图片由一个整数数组所代表,数组中每个数是墙的高度.下图可以表示为数组(2.5.1.2.3.4.7.2).假如开始下雨了,那么挡板之间的水坑能够装多少水(水足 ...
- 迭代加深搜索 POJ 1129 Channel Allocation
POJ 1129 Channel Allocation Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14191 Acc ...
- 来说说SpringMVC + JSONP的跨域请求
先来说说场景,JSON,这货大家应该都懂,不懂的请自动面壁思过,那么什么是JSONP,不是JSON放了个P就叫JSONP,而是JSON with Padding,在进行跨域请求的时候需要的数据,什么是 ...
- java 14-11 对象数组
有5个学生,请把这个5个学生的信息存储到数组中,并遍历数组,获取得到每一个学生信息. 创建学生类: 学生:Student 成员变量:name,age 构造方法:无参,带参 成员方法:getXxx()/ ...
- Sublime Text2 安装Package Control
Sublime Text2是一款轻量级的妖娆的编辑器,想要更多私人定制功能的第一步就是安装Package Control 这是官网的安装方法: Click the Preferences > ...
- 23Mybatis_根据订单商品数据模型的练习对resultMap和resulttype的总结
resultType: 作用: 将查询结果按照sql列名pojo属性名一致性映射到pojo中. 场合: 常见一些明细记录的展示,比如用户购买商品明细,将关联查询信息全部展示在页面时,此时可直接使用re ...
- [转]redis 五种数据类型的使用场景
FROM : http://blog.csdn.net/gaogaoshan/article/details/41039581#t5 String 1.String 常用命令: 除了get.set.i ...
- C语言 文件操作7--文件错误处理
//文件错误处理 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #include&l ...
- 对兼容ie浏览器所遇到的问题及总结
1,若直接给一个元素设置absolute定位.在浏览器缩放的时候.位置会错位.解决的方法是给外层的元素设置为relative定位. 2,低版本ie浏览器不支持placeholder属性 3,盒模型上规 ...