JQuery框架
对前台注册页面register.ftl进行表单验证，当符合基本验证规则后，再通过JQuery formvalidator Ajax将数据传到action中，然后与数据库中存储的数据进行对比，并将结果返回到客户端，从而达到对用户名和邮箱进行实时验证是否已注册过。
由于项目的需要，最近一段时间在学习JQuery，从中发现了一款比较好使的基于JQuery的formValidator表单验证框架，下面将项目中用到的一个Ajax实时校验与大家分享一下。
由于项目用的是SSH框架，又用到了Freemarker模板页面，数据库是Mysql5.0，主要内容如下所示：
1.注册页面，用Freemarker所写，这里使用了JQuery的一个表单验证框架formvalidator：
对前台注册页面register.ftl进行表单验证，当符合基本验证规则后，再通过JQuery formvalidator Ajax将数据传到action中。
register.ftl：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>会员注册</title>
<link href="${base}/forum/css/pass.css" rel="stylesheet" type="text/css">
<link href="${base}/css/validator.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="<@s.url value='/js/showError.js'/>"></script>
<script type="text/javascript" src="<@s.url value='/js/jquery-1.3.2.min.js'/>"></script>
<script type="text/javascript" src="${base}/js/formValidator.js" charset="UTF-8"></script>
<script type="text/javascript" src="${base}/js/formValidatorRegex.js" charset="UTF-8"></script>
<!—下面的JS代码是，实时验证用户名或注册邮箱是否存在 -->
<script type="text/javascript">
$(document).ready(function(){
$.formValidator.initConfig({formid:"form1",onerror:function(msg){},onsuccess:function(){return true;}});
$("#username")
.formValidator({onshow:"请输入用户名",onfocus:"请您记住填写的用户名，以后登录时需要用到！",oncorrect:"该用户名可以注 册"})
.inputValidator({min:4,max:15,onerror:"用户名长度不能小于4个字符"})
.ajaxValidator({
type : "get",
datatype: "json",
data: "username:"+$("#username").val(),
url : "${base}/user/ajax/userCheck!checkUser.action",
success : function(data){if(data.userExist){return false;}else{return true;}},
buttons: $("#button"),
error: function(){alert("服务器没有返回数据，可能服务器忙，请重试");},
onerror : "该用户名已经存在，请更换用户名",
onwait : "正在对用户名进行合法性校验，请稍候…"
});
$("#email")
.formValidator({onshow:"请输入邮箱",onfocus:"邮箱6-100个字符,请正确输入",oncorrect:"恭喜你,邮箱可以注册",forcevalid:true})
.inputValidator({min:6,max:100,onerror:"你输入的邮箱长度非法,请确认"})
.regexValidator({regexp:"^([\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onerror:"你输入的邮箱格式不正确"})
.ajaxValidator({
type : "get",
datatype: "json",
data: "email:"+$("#email").val(),
url : "${base}/user/ajax/userCheck!checkUser.action",
success : function(data){if(data.emailExist){return false;}else{return true;}},
buttons: $("#button"),
error: function(){alert("服务器没有返回数据，可能服务器忙，请重试");},
onerror : "该邮箱已经存在，请更换邮箱",
onwait : "正在对邮箱进行校验，请稍候…"
});
});
</script>
</head>
<body>
<div id="passmain">
<div class="passbottom">
<div class="pbleftb">
<h3 style="text-align:center;">新用户注册</h3>
<p class="p2t">带*号的项目为必选项, 请全部填写</p>
<ul class="p2ul">
<@s.form action="register" method="POST" theme="simple" id="form1" name="form1">
<@s.token name="token"/>
<li class="p2li">
<div class="p2left">用户登录昵称<span style="color:#FF0000;">* </span></div>
<div class="p2right"><@s.textfield name="user.username" id="username" class="item_input" size="30" maxlenght="20" required="true" onblur="checkUser();" />
</div>
<div class="p2center"><div id="usernameTip"/>
</div>
</li><br>
<li class="p2li">
<div class="p2left">性别<span style="color:#FF0000;">* </span></div>
<div class="p2right"><@s.radio
name="user.gender"
list={action.getText('user.gender.male'):action.getText("user.gender.male"),action.getText('user.gender.female'):action.getText("user.gender.female")}
size="30"/></div>
</li><br>
<li class="p1t">注意：邮箱必须是可以收到程序员之家激活码的。</li>
<li class="p1t">用户注册后，需要激活，才可以使用！激活码只会发到您注册邮箱中。</li>
<li class="p2li">
<div class="p2left">Email地址<span style="color:#FF0000;">* </span></div>
<div class="p2right"><@s.textfield name="user.email" id="email" class="item_input" size="30" onblur="checkEmali();" required="true"/>
</div>
<div class="p2center"><div id="emailTip"></div></div>
</li><br>
<li class="p1t">5-20位字母、数字或字符组合，首字母必须为字母。</li>
<li class="p1t">为了您的帐户安全，强烈建议您的密码使用字符+数字+特殊字符方式，并且密码长度大于8位。</li>
<li class="p2li">
<div class="p2left">密码<span style="color:#FF0000;">* </span></div>
<div class="p2right">
<@s.password name="user.password" id="userPassword" class="item_input" size="30" maxlength="16" onblur="checkPassword();" required="true"/>
</div>
<div class="p2center"><div id="divHintPassword" style="display:none;"></div>
</div>
</li><br>
<li class="p2li">
<div class="p2left">重复输入密码<span style="color:#FF0000;">* </span></div>
<div class="p2right"><@s.password name="verifyPassword" id="verifyPassword" class="item_input" size="30" maxlength="16" onblur="validatePassword();" required="true"/></div>
<div class="p2center">
<div id="divHintverifyPassword" style="display:none;"></div>
</div>
</li><br>
<br>
<li class="p2li">
<div class="p2left">输入校验码<span style="color:#FF0000;">*</span> </div>
<div class="p2right"><@s.textfield name="validationCode" class="item_input" size="10" required="true"/>
</div>
</li>
<li class="p2li">
<div class="p2left">校验码<span style="color:#FF0000;">*</span> </div>
<div class="p2right"><img src="<@s.url value='/vcode.jpg'/>" align='absmiddle' border='0'/></div>
</li>
<li class="p1t"><input name="提交" type="submit" value="注册用户" />
</li>
</ul>
</div>
</@s.form>
</div>
</div>
</body>
</html>
2．后台Action类，UserAjaxAction.java:
基于Hibernate与数据库进行交互验证用户名和邮箱是否存在，同时返回的数据格式为JSon类型的。
packagecom.qiuyanluocheng.action;
importIO.IOException;
importcom.googlecode.jsonplugin.annotations.JSON;
/**
*
*@authorqiuyanluocheng
*
*/
publicclassUserAjaxActionextendsBaseAction
{
/**
* BaseAction是自己封装的
*/
privatestaticfinallongserialVersionUID= 1L;
privateString username;// 用户名
privateString email;// 邮箱
privatebooleanuserExist;
privatebooleanemailExist;
// 表示返回的Json数据中不含此属性
@JSON(serialize=false)
publicString getUsername()
{
returnusername;
}
publicvoidsetUsername(String username)
{
this.username = username;
}
publicString getEmail()
{
returnemail;
}
publicvoidsetEmail(String email)
{
this.email = email;
}
publicbooleanisUserExist()
{
returnuserExist;
}
publicvoidsetUserExist(booleanuserExist)
{
this.userExist = userExist;
}
publicbooleanisEmailExist()
{
returnemailExist;
}
publicvoidsetEmailExist(booleanemailExist)
{
this.emailExist = emailExist;
}
// 检查用户是否存在
publicString checkUser()throwsIOException
{
if(username !=null){
if(this.getUserService().isUsernameExist(username)){
// System.out.println("用户存在！！！！！"+username);
userExist =true;
}else{
// System.out.println("用户不存在！！！！！"+username);
userExist =false;
}
}
if(email !=null){
if(this.getUserService().isEmailExist(email)){
// System.out.println("邮箱存在！！！！！"+email);
emailExist =true;
}else{
// System.out.println("邮箱不存在！！！！！"+email);
emailExist =false;
}
}
return"ajax";
}
}
注意需要导入jsonplugin-0.34.jar包。
3. 配置文件struts.xml：
配置action，并且注意package要继承json-default包，且结果集类型为json。
<?xml version="1.0"encoding="utf-8"?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "dtds/struts-2.0.dtd">
<struts>
<package name="userAjax"extends="json-default"namespace="/user/ajax">
<action name="userCheck"class="com.qiuyanluocheng.action.UserAjaxAction">
<!—返回结果类型必须为json -->
<result name="ajax"type="json"></result>
</action>
</package>
</struts>