簡介
由於項目的需要，最近一段時間在學習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 類型的。
package com.qiuyanluocheng.action;
import IO.IOException;
import com.googlecode.jsonplugin.annotations.JSON;
/**
*
* @author qiuyanluocheng
*
*/
public class UserAjaxAction extends BaseAction
{
/**
* BaseAction是自己封裝的
*/
private static final long serialVersionUID = 1L;
private String username;// 用戶名
private String email;// 信箱
private boolean userExist;
private boolean emailExist;
// 表示返回的Json數據中不含此屬性
@JSON(serialize= false)
public String getUsername()
{
return username;
}
public void setUsername(String username)
{
this.username = username;
}
public String getEmail()
{
return email;
}
public void setEmail(String email)
{
this.email = email;
}
public boolean isUserExist()
{
return userExist;
}
public void setUserExist( boolean userExist)
{
this.userExist = userExist;
}
public boolean isEmailExist()
{
return emailExist;
}
public void setEmailExist( boolean emailExist)
{
this.emailExist = emailExist;
}
// 檢查用戶是否存在
public String checkUser() throws IOException
{
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>
jQuery框架中增加對輸入框的驗證，在設計頁面表單時，常常因為需要寫大量的驗證信息，還要寫複雜的正則表達式，現在這樣一個驗證框架可以解決這樣的繁雜問題。這樣jquery.validate.js就誕生了，jquery.validate.js是jquery旗下的一個驗證框架，藉助jquery的優勢，我們可以迅速驗證一些常見的輸入,並且可以自己擴充自己的驗證方法，並且對國際化也有很好的支持 。
validate自帶的默認驗證
required: "必選欄位",
remote: "請修正該欄位",
email: "請輸入正確格式的電子郵件",
url: "請輸入合法的網址",
date: "請輸入合法的日期",
dateISO: "請輸入合法的日期 (ISO).",
number: "請輸入合法的數字",
digits: "只能輸入整數",
creditcard: "請輸入合法的信用卡號",
equalTo: "請再次輸入相同的值",
accept: "請輸入擁有合法後綴名的字元串",
maxlength: jQuery.format("請輸入一個長度最多是 {0} 的字元串"),
minlength: jQuery.format("請輸入一個長度最少是 {0} 的字元串"),
rangelength: jQuery.format("請輸入一個長度介於 {0} 和 {1} 之間的字元串"),
range: jQuery.format("請輸入一個介於 {0} 和 {1} 之間的值"),
max: jQuery.format("請輸入一個最大為 {0} 的值"),
min: jQuery.format("請輸入一個最小為 {0} 的值")
