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: 900; } .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"; } }
