如何使這個Ajax檢查器在表單中的多個字段？

Question

我有下面的代碼驗證窗體的代碼。我如何做到這一點，所以我可以重新使用用戶名以外的其他領域的代碼？

我該如何做到這一點，我可以有多個其他領域，並使用相同的jQuery代碼進行驗證？

<form name="form" id="form" class="form" action="success.html" 
onsubmit="return validate(this)" method="post"> 
<label for="username">User Name:</label> 
<input type="text" name="username" id="username" /> 
<label for="fullname">Full Name:</label> 
<input type="text" name="fullname" id="fullname" /> 
<input type="submit" value="Submit" class="submit" /> 
</form> 

這裏是jQuery的：

// form validation function // 
function validate(form) { 
var username = form.username.value; 
var usernameRegex = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/; 

if(username == "") { 
inlineMsg('username','You must enter your username.',2); 
return false; 
} 
if(!username.match(usernameRegex)) { 
inlineMsg('username','You have entered an invalid username.',2); 
return false; 
} 

if(username.length>20){ 
inlineMsg('username','Username is too long (max 20 char)', 2); 
return false; 
} 


return true; 

} 


// START OF MESSAGE SCRIPT // 

var MSGTIMER = 20; 
var MSGSPEED = 5; 
var MSGOFFSET = 3; 
var MSGHIDE = 3; 

// build out the divs, set attributes and call the fade function 
function inlineMsg(target,string,autohide) { 
var msg; 
var msgcontent; 
if(!document.getElementById('msg')) { 
msg = document.createElement('div'); 
msg.id = 'msg'; 
msgcontent = document.createElement('div'); 
msgcontent.id = 'msgcontent'; 
document.body.appendChild(msg); 
msg.appendChild(msgcontent); 
msg.style.filter = 'alpha(opacity=0)'; 
msg.style.opacity = 0; 
msg.alpha = 0; 
} else { 
msg = document.getElementById('msg'); 
msgcontent = document.getElementById('msgcontent'); 
} 
msgcontent.innerHTML = string; 
msg.style.display = 'block'; 
var msgheight = msg.offsetHeight; 
var targetdiv = document.getElementById(target); 
targetdiv.focus(); 
var targetheight = targetdiv.offsetHeight; 
var targetwidth = targetdiv.offsetWidth; 
var topposition = topPosition(targetdiv) - ((msgheight - targetheight)/2); 
var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET; 
msg.style.top = topposition + 'px'; 
msg.style.left = leftposition + 'px'; 
clearInterval(msg.timer); 
msg.timer = setInterval("fadeMsg(1)", MSGTIMER); 
if(!autohide) { 
autohide = MSGHIDE; 
} 
window.setTimeout("hideMsg()", (autohide * 1000)); 
} 

// hide the form alert // 
function hideMsg(msg) { 
var msg = document.getElementById('msg'); 
if(!msg.timer) { 
msg.timer = setInterval("fadeMsg(0)", MSGTIMER); 
} 
} 

// face the message box // 
function fadeMsg(flag) { 
if(flag == null) { 
flag = 1; 
} 
var msg = document.getElementById('msg'); 
var value; 
if(flag == 1) { 
value = msg.alpha + MSGSPEED; 
} else { 
value = msg.alpha - MSGSPEED; 
} 
msg.alpha = value; 
msg.style.opacity = (value/100); 
msg.style.filter = 'alpha(opacity=' + value + ')'; 
if(value >= 99) { 
clearInterval(msg.timer); 
msg.timer = null; 
} else if(value <= 1) { 
msg.style.display = "none"; 
clearInterval(msg.timer); 
} 
} 

// calculate the position of the element in relation to the left 
of the browser // 
function leftPosition(target) { 
var left = 0; 
if(target.offsetParent) { 
while(1) { 
left += target.offsetLeft; 
if(!target.offsetParent) { 
break; 
} 
target = target.offsetParent; 
} 
} else if(target.x) { 
left += target.x; 
} 
return left; 
} 
// calculate the position of the element in relation to the 
top of the browser window // 
function topPosition(target) { 
var top = 0; 
if(target.offsetParent) { 
while(1) { 
top += target.offsetTop; 
if(!target.offsetParent) { 
break; 
    } 
    target = target.offsetParent; 
} 
} else if(target.y) { 
top += target.y; 
} 
return top; 
} 

// preload the arrow // 
if(document.images) { 
arrow = new Image(7,80); 
arrow.src = "images/msg_arrow.gif"; 
} 

Answer 1

這是我在過去使用的插件： https://github.com/posabsolute/jQuery-Validation-Engine

看看在那裏，這可能是對你有好處。我個人修改它以適合我的需求，但這有點極端。

你不應該重新發明輪子:)