JavaScript、CSS、JSP 实现用户注册页面与信息校验
2024-09-21 07:51:28
参考：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";
}
}
最新文章
- RabbitMQ Exchange & Queue Design Trade-off
- ASP.NET应用中会话状态丢失及解决策略
- [Linux] 解决终端显示乱码问题
- Codeforces Round #375 (Div. 2) A B C D F
- POJ3233 Matrix Power Series
- 一种奇特的DEDE隐藏后门办法
- USB 2.0 Spec 微缩版
- iOS开发--appstore应用上架
- XCode4中的文本查找和文本替换功能
- open vswitch常用操作
- 【复制】【编码】MySQL复制中的编码问题
- Html5笔记之第七天
- 201521123008《Java程序设计》第六周实验总结
- bzoj 4310: 跳蚤
- cmd 与 bash 基础命令入门
- python timeit模块简单用法
- webservice跨域问题
- HDU 6071 Lazy Running （同余最短路 dij）
- 大数据量下MySQL插入方法的性能比较
- yii2 中where条件查询