仿凤凰网的注册页面，javascript完成简单的空/邮箱格式/字符串的长度校验 ajax完成服务器端是否同名校验(转载)
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;
}
此时基本完成，下面是效果图：
浙公网安备 33010602011771号