最近發(fā)現(xiàn)使用prototype來(lái)做表單的前臺(tái)驗(yàn)證感覺(jué)非常不錯(cuò)，prototype.js 是由 Sam Stephenson 寫(xiě)的一個(gè) javascript 類(lèi)庫(kù)。這個(gè)構(gòu)思奇妙，而且
兼容標(biāo)準(zhǔn)的類(lèi)庫(kù)，能幫助你輕松建立有高度互動(dòng)的 Web 2.0 特性的富客戶端頁(yè)面。下面是一個(gè)使用它做前臺(tái)表單驗(yàn)證的例子。
var flag=[true,true,true,true,true,true,true,true,true,true];
var userNameInfo=["用戶名不能為空","用戶名必須為6~20位","用戶已存在","恭喜用戶名可以使用"];
var passwordInfo=["密碼不能為空","密碼長(zhǎng)度不能小于6位","請(qǐng)?jiān)俅屋斎朊艽a","兩次密碼輸入不一致，請(qǐng)重新輸入"];
function changeImage()
{
var timenow=new Date().getTime();
$('checkcode').src = "image/loading.gif";
$('checkcode').src = "random.jsp?d="+timenow;
}
function checkUserName()
{
if ($F("userName").match(/^\s*$/g)) {
$("userNameErr").innerHTML =userNameInfo[0];
flag[0]=false;
}else{
var re=/^(\w){6,20}$/;
var tt = re.test($F("userName"));
if(tt==false){
$("userNameErr").innerHTML = userNameInfo[1];
flag[0]=false;
}else{
$("userNameErr").innerHTML = "<img src='image/loading.gif'>";
isExsitUsername();
}
}
}
function checkPassword()
{
if ($F("password").match(/^\s*$/g)) {
$("pwdErr").innerHTML =passwordInfo[0];
flag[1]=false;
}else if($F("password").length<6){
$("pwdErr").innerHTML=passwordInfo[1];
flag[1]=false;
}else{
$("pwdErr").innerHTML="";
flag[1]=true;
}
}
function checkRePassword(){
if ($F("password2").match(/^\s*$/g)) {
$("repwdErr").innerHTML =passwordInfo[2];
flag[2]=false;
}else if($F("password2")!=$F("password")){
$("repwdErr").innerHTML=passwordInfo[3];
flag[2]=false;
}else{
$("repwdErr").innerHTML="";
flag[2]=true;
}
}
function checkName(){
if($F("name").match(/^\s*$/g)){
$("nameErr").innerHTML="昵稱不能為空";
flag[3]=false;
}else{
$("nameErr").innerHTML="";
flag[3]=true;
}
}
function checkQuestion(){
if($F("question").match(/^\s*$/g)){
$("questionErr").innerHTML="請(qǐng)選擇一個(gè)安全問(wèn)題";
flag[4]=false;
}else{
$("questionErr").innerHTML="";
flag[4]=true;
}
}
function checkAnswer(){
if($F("answer").match(/^\s*$/g)){
$("answerErr").innerHTML="安全回答不能為空";
flag[5]=false;
}else if($F("answer").length<4){
$("answerErr").innerHTML="安全回答問(wèn)題不能少于4個(gè)字符";
flag[5]=false;
}else{
$("answerErr").innerHTML="";
flag[5]=true;
}
}
function checkEmail()
{
var reEmail =/(\S)+[@]{1}(\S)+[.]{1}(\w)+/;
if($F("email").match(/^\s*$/g)){
$("emailErr").innerHTML="Email不能為空";
flag[6]=false;
}else{
var temp=reEmail.test($("email").value);
if(temp==false){
$("emailErr").innerHTML= "Email必須符合要求!";
flag[6]=false;
}else{
$("emailErr").innerHTML="<img src='image/loading.gif'>";
isExsitEmail();
}
}
}
function checkMobile(){
var patrn=/^(?:13\d|15[89])-?\d{5}(\d{3}|\*{3})$/;
if($F("mobile").match(/^\s*$/g)){
$("mobileErr").innerHTML="";
flag[7]=true;
}else{
if (!patrn.test($F("mobile"))) {
$("mobileErr").innerHTML="請(qǐng)輸入正確的手機(jī)號(hào)碼";
flag[7]=false;
}else{
$("mobileErr").innerHTML="";
flag[7]=true;
}
}
}
function checkPID(){
var patrn=/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/;
if($F("PID").match(/^\s*$/g)){
$("PIDErr").innerHTML="";
flag[8]=true;
}else{
if (!patrn.test($F("PID")))
{
$("PIDErr").innerHTML="身份證號(hào)碼有誤!";
flag[8]=false;
}else{
$("PIDErr").innerHTML="";
flag[8]=true;
}
}
}
function isExsitUsername(){
var username=$F("userName");
var url='user_checkUsername.do';
var pars="username="+username;
var usernameAjax=new Ajax.Request(
url,
{method:'get',parameters:pars,onComplete:showUResult}
);
}
function showUResult(result){
if(result.responseText.indexOf("true")!=-1){
$("userNameErr").innerHTML=userNameInfo[2];
flag[0]=false;
}else{
$("userNameErr").innerHTML="<font color='green'>"+userNameInfo[3]+"</font>";
flag[0]=true;
}
}
function isExsitEmail(){
var email=$F("email");
var url='user_checkEmail.do';
pars="email="+email;
var emailAjax=new Ajax.Request(
url,
{method:'get',parameters:pars,onComplete:showEResult}
);
}
function showEResult(result){
if(result.responseText.indexOf("true")!=-1){
$("emailErr").innerHTML="這個(gè)Email已經(jīng)有人使用，請(qǐng)換一個(gè)";
flag[6]=false;
}else{
$("emailErr").innerHTML="<font color='green'>已通過(guò)驗(yàn)證</font>";
flag[6]=true;
}
}
function checkCode(){
if($("code").value.match(/^\s*$/g)){
$("codeErr").innerHTML="驗(yàn)證碼不能為空";
flag[9]=false;
}else{
isCorrectCode();
}
}
function isCorrectCode(){
var code=$F("code");
var url='checkcode.jsp';
pars="code="+code+"&ram="+Math.random();
var codeAjax=new Ajax.Request(
url,
{method:'get',parameters:pars,asynchronous:false,onComplete:showCResult}
);
}
function showCResult(result){
if(result.responseText.indexOf("validate_successful")!=-1){
$("codeErr").innerHTML="";
flag[9]=true;
}else{
$("codeErr").innerHTML="錯(cuò)誤的驗(yàn)證碼";
flag[9]=false;
}
}
function checkform(){
checkUserName();
checkPassword();
checkRePassword();
checkName();
checkQuestion();
checkAnswer();
checkEmail();
checkMobile();
checkPID();
checkCode();
for(var i=0;i<flag.length;i+=1){
if(flag[i]==false)
return false;
}
return true;
}
其中
$()： 函數(shù)是在 DOM 中使用過(guò)于頻繁的 document.getElementById() 方法的一個(gè)便利的簡(jiǎn)寫(xiě)，就像這個(gè) DOM 方法一樣，這個(gè)方法返回參數(shù)傳入的 id 的那個(gè)元素。
$F() ：函數(shù)是另一個(gè)大收歡迎的“快捷鍵”，它能用于返回任何表單輸入控件的值，比如文本框或者下拉列表。這個(gè)方法也能用元素 id 或元素本身做為參數(shù)。
Ajax.Request 類(lèi)：如果你不使用任何的幫助程序包，你很可能編寫(xiě)了整個(gè)大量的代碼來(lái)創(chuàng)建 XMLHttpRequest 對(duì)象并且異步的跟蹤它的進(jìn)程，然后解析響應(yīng)并處理它。當(dāng)你不需要支持多于一種類(lèi)型的瀏覽器時(shí)你會(huì)感到非常的幸運(yùn)，反之你就要考慮使用prototype的Ajax.Request類(lèi)。你也許注意到了在使用它做無(wú)刷新驗(yàn)證用戶名，Email以及驗(yàn)證碼時(shí)，使用'get'方法把參數(shù)傳遞給url，后面都帶有一個(gè)參數(shù)，這個(gè)參數(shù)值是當(dāng)前系統(tǒng)時(shí)間或是一個(gè)隨機(jī)參數(shù)的一個(gè)數(shù)，這樣做是為了避免瀏覽器的從它的緩存中讀取響應(yīng)信息，影響結(jié)果的正確性。