register.jsp界面代码如下:
注意以下几点:1,文本框的name,id最好一致,规范性的命名才符合实际应用,
2,后面校验的显示信息此处我定义的为原来id+“js”,当然这里可以随意,不过,关于验证所有的文本框是否为空这方法中我把封装一工具方法,当然可以每个都判断,不过太麻烦,我见凤凰网的注册页面就是这样一个一个的写,太麻烦了。
代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <base href="<%=basePath%>"> <head> <link href="css/main.css" type="text/css" media="screen" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/register.js"></script> <title>我的博客系统注册</title> </head> <body> <div class="registerBody"> <div style="height:500px;" class="registerBox" > <div class="tit" style="padding:10px 10px 0 0; height:35px; background-position:left bottom;"> <span style="float:right"> 已经注册?请直接 <a href=""> <strong class="u_blue"> <u>登录</u> </strong> </a> </span> <h3 class="u_blue">注册用户</h3> </div> <hr/> <s:form name="reg" action="register" validate="true"> <table align="center"> <tr> <td> <label> 帐号: </label> </td> <td> <input type="text" id="username" name="username" /> * </td> <td> <div id="usernameJS"></div> </td><td id="usernameMessage"></td> </tr> <tr> <td> <label> 密码: </label> </td> <td> <input type="password" id="password" name="password" /> * </td> <td> <div id="passwordJS"></div> </td> </tr> <tr> <td> <label> 确认密码: </label> </td> <td> <input type="password" id="repassword" name="repassword" /> * </td> <td> <div id="repasswordJS"></div> </td> </tr> <tr> <td> <label> 邮箱 : </label> </td> <td> <input type="text" id="email" name="email" /> * </td> <td> <div id="emailJS"></div> </td> </tr> <tr> <td> <label> 昵称: </label> </td> <td> <input type="text" id="nickname" name="nickname" /> * </td> <td> <div id="nicknameJS"></div> </td> </tr> <tr> <td> <label> 密码保护问题: </label> </td> <td> <input type="text" id="question" name="question" /> * </td> <td> <div id="questionJS"></div> </td> </tr> <tr> <td> <label> 密码保护的答案: </label> </td> <td> <input type="text" id="answer" name="answer" /> * </td> <td> <div id="answerJS"></div> </td> </tr> <tr> <td> <input type="submit" id="submit" value="注册" onclick="return doSubmit()"/> </td> </tr> </table> </s:form> </div> <hr/> <div class="copyright" align="center"> 博客网站 版权所有 <br> Copyright © 2008-2012 Henu University. All Rights Reserved. </div></div> </body> </html>
页面如下:
当然界面可以加些图片,因为我美感不好,弄个丑八怪,基本雏形就这样。
下面是js代码:
$().ready(function() { isNullValidate("#username", "用户名不能为空","请输入常用的用户名,该用户名将作为登录"), isNullValidate("#password", "密码不能为空","请设置您的密码"), isNullValidate("#repassword", "确认密码不能为空","请输入常用密码"), isNullValidate("#nickname","昵称不能为空","请设置您的昵称"), isNullValidate("#question", "密保问题不能为空","请设置您的密保"), isNullValidate("#answer", "答案不能为空","请设置您的密保问题"), isNullValidate("#email","邮箱不能为空","请设置您的邮箱") validateEmail(), validateUsername(), validateLength("#username",3,20,"用户名长度必须为3-20位"), validateLength("#password",3,30,"用户名长度必须为3-30位"), validateEqual("#password","#repassword","密码不一致") }) //isNull校验是否为空 function isNullValidate(id, message,messageTip) { //失去焦点 进行校验 $(id).blur(function(){ isNull(id,message); }); //得到焦点显示的提示信息 $(id).focus(function(){ showTip(id,messageTip); }); } function showTip(id,messageTip){ var idJS= id + "JS"; $(idJS).css({"color":"black"}); showMessage(idJS,messageTip); } function isNull(id,message){ var value = $(id).val(); var idJS = id + "JS"; if (value == null || value == "") { $(idJS).css({"color":"red"}); $(id).css({"background":"gray","border-color":"red","border":""}); showMessage(idJS, message); return false; } else { $(id).css({"background":"white"}); showMessage(idJS, ""); showPic(idJS); return true; } } //validateLength校验长度 function validateLength(id, min, max, message) { $(id).blur(function() { validate_length(id,min,max,message); }) } function validate_length(id,min,max,message){ var idJS = id + "JS"; var value = $(id).val(); if (value.length < min || value.length > max){ showMessage(idJS, message); $(idJS).css({"color":"red"}); return false; } else{ showMessage(idJS, ""); showPic(idJS); return true; } } //validateEqual校验是否相等 function validateEqual(id1, id2, message) { //此处无法$(id1,id2),否则将出现奇怪的错误,而其他网站也同样有这样的bug //比如前两次分别输入密码(password,repassword)相同,当改变第一个密码加其他的后不提示密码不一致 $(id2).blur(function() { validate_equal(id1,id2,message); }) } function validate_equal(id1,id2,message){ var idJS2 = id2 + "JS"; var value1 = $(id1).val(); var value2 = $(id2).val(); if (value1 != value2) { showMessage(idJS2, message); $(idJS2).css({"color":"red"}); $(id2).css({"background":"gray","border-color":"red","border":""}); $(id1).css({"background":"gray","border-color":"red","border":""}); return false; } else { $(id1).css({"background":"white"}); $(id2).css({"background":"white"}); showMessage(idJS2, ""); showPic(idJS2); return true; } } //validateEmali校验email格式 function validateEmail() { $("#email").blur(function(){ isEmail(); } ) } function isEmail(){ var email = $("#email").val(); var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; if (reg.test(email)) { // showMessage("#emailJS", ""); // showPic("#emailJS"); return true; } else { showMessage("#emailJS", "Email格式不正确"); $("#emailJS").css({"color":"red"}); $("#email").css({"background":"gray","border-color":"red","border":""}); return false; } } function validateName(){ $.ajax( { type : "POST", url : "executeUsername", data : "username=" + $("#username").val(), success : getValidateName, dataType : "text" }); } function getValidateName(message) { if(message == "false"){ showMessage("#usernameJS","用户名已注册,请更换注册名"); $("#username").css({"background":"gray","border-color":"red","border":""}); $("#usernameJS").css({"color":"red"}); return false; } else{ showMessage("#usernameJS","恭喜你,此用户名可用"); $("#username").css({"background":"white"}); $("#usernameJS").css({"color":"green"}); return true; } } //valivateUsername校验用户名是否被注册 function validateUsername() { $("#username").blur(function(){ var value=$("#username").val(); if(value!=null&&value!=""){ validateName(); }else return false; } ) } //showMessage工具方法,显示某id需要显示的信息 function showMessage(id, message) { $(id).html(message); } function showPic(id) { $(id).append("<img src='images/register_ok.png'></img>"); } function doSubmit(){ if(isNull("#username", "用户名不能为空","#usernameJS") && isNull("#password", "密码不能为空","#passwordJS") && isNull("#repassword", "确认密码不能为空","#repasswordJS")&& isNull("#nickname","昵称不能为空","#nicknameJS") && isNull("#question", "密保问题不能为空","#questionJS")&& isNull("#answer", "答案不能为空","#answerJS") && isNull("#email","邮箱不能为空","#emailJS") && isEmail() // && validateName() && validate_length("#username",3,20,"用户名长度必须为3-20位") && validate_length("#password",3,30,"用户名长度必须为3-30位") && validate_equal("#password","#repassword","密码不一致")){ return true; } else { alert("请重新输入"); return false; } }
相信大家也看到了,
$().ready(function() 定义页面加载的脚本,这里我们绑定文本框的focus和blur事件,即,聚焦和失去焦点,当聚焦时在div里显示出要输入的信息,而失去焦点时进行校验,这里有个关键的,利用ajax往action里查询是否有输入的用户名,并返回true或false字符串,
所以
function validateName(){ $.ajax( { type : "POST", url : "executeUsername", data : "username=" + $("#username").val(), success : getValidateName, dataType : "text" }); }传参数,返回函数处理如下:
function getValidateName(message) { if(message == "false"){ showMessage("#usernameJS","用户名已注册,请更换注册名"); $("#username").css({"background":"gray","border-color":"red","border":""}); $("#usernameJS").css({"color":"red"}); return false; } else{ showMessage("#usernameJS","恭喜你,此用户名可用"); $("#username").css({"background":"white"}); $("#usernameJS").css({"color":"green"}); return true; } }
action中处理:
public String executeUsername(){ HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("UTF-8"); PrintWriter writer = null; try { writer = response.getWriter(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } if(userService.regusterUsername(username)){ writer.print("false"); }else{ writer.print("true"); } return null; }
此时基本完成,下面是效果图: