【jQuery】利用表單的序列化根據name取表單，做表單的驗證
在前臺做表單的驗證的方式有很多種，具體思想是你先要把表單的要驗證項裡面的值取出來，然後再指令碼處進行判斷，最後根據判斷結果告警，然後給onsubmit="return XX()"那個函式，返回true與false的布林值。整個過程，把表單的要驗證項取出來是關鍵。在《【JavaScript】表單即時驗證，不成功不讓提交》（點選開啟連結）中利用了id取每一個表單項的屬性，這是最基礎的，但是如果需要以name的方法取出表單的項呢？此時，你可以利用jQuery的序列化，根據name來取出表單的各個項。
一、基本目標
利用jQuery的序列化，根據name來取出表單的各個項，做表單驗證。如下圖。如果使用者正確輸入完表單，則彈出使用者輸入的所有資訊。
二、HTML佈局
先貼上這個表單的HTML佈局程式碼。很簡單。只是請各位注意到我只是給每一個表單項賦予了name屬性，沒有id屬性。下面的Jquery指令碼完全是根據name來取值的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <title>序列化</title> </head> <body> <form action="" method="post" onsubmit="return submitPreprocessing(this)"> <input type="text" name="user" /><br /> <input type="password" name="pwd" /><br /> <input type="password" name="pwd2" /><br /> <select name="nation"> <option value="China">China</option> <option value="England">England</option> <option value="USA">USA</option> </select><br /> r1:<input type="radio" name="r" value="r1" />r2:<input type="radio" name="r" value="r2" /><br /> c1:<input type="checkbox" value="Yes" name="c1" /><br /> <textarea name="ps" rows="2" cols="8" wrap="virtual"></textarea><br /> <input type="submit" value="Go!" /> </form> </body> </html>
三、Jquery指令碼
1、整個指令碼一開始，得到了form表單之後，先通過serialize()方法取出form中的所有值，serialize()方法的返回值是一個如何get方式提交的字串，大家在上面的效果圖，也可以看到了。之後，首先用split()方法，根據&來劃分成陣列rawParamArray，陣列rawParamArray中的每一個元素都是paramName=paramValue的形式，就是user=sss這種形式。之後對陣列rawParamArray進行遍歷，遍歷到rawParamArray的每一項，再次根據=來劃分陣列ParamArray，那麼得到的陣列ParamArray的第一項就是屬性名，第二項就是屬性值。之後該怎麼判斷就怎麼判斷。如果判斷某一項判斷失敗，這一項的布林值則會演變成false。
2、對於單選框radio、複選框checkbox，如果拿不到某一項的屬性名，屬性值則意味著這個單選框、複選框根本就沒有選！
3、對於密碼項，由於要判斷與之後的密碼項是否輸入的一致，因此要同時取到下一個密碼項才能判斷，如果你覺得煩，可以在確定密碼項，設定id，直接用id去取也是沒有問題的。
<script>
function submitPreprocessing(obj){
var inputTextOK=true;
var passwordLength=false;
var passwordCheck=false;
var radioSelected=false;
var checkboxSelected=false;
var rawParamArray=$(obj).serialize().split("&");
for(var i=0;i<rawParamArray.length;i++){
var ParamArray=rawParamArray[i].split("=");
if((ParamArray[0]=="user")||(ParamArray[0]=="pwd")||(ParamArray[0]=="ps")){
if(ParamArray[1]==""){
inputTextOK=false;
}
}
if((ParamArray[0]=="pwd")){
if(ParamArray[1].length>5){
passwordLength=true;
}
if(ParamArray[1]+""==(rawParamArray[i+1].split("=")[1]+"")){
passwordCheck=true;
}
}
if((ParamArray[0]=="r")){
radioSelected=true;
}
if((ParamArray[0]=="c1")){
checkboxSelected=true;
}
}
if(!inputTextOK){
alert("使用者名稱、密碼、備註任一為空！");
}
if(!passwordLength){
alert("你的密碼長度少於6位！");
}
if(!passwordCheck){
alert("兩次輸入的密碼不一致！");
}
if(!radioSelected){
alert("你的單選框還沒有選上！");
}
if(!checkboxSelected){
alert("你的c1複選框還沒有選上！");
}
if(inputTextOK&&passwordLength&&passwordCheck&&radioSelected&&checkboxSelected){
alert("謝謝你的填寫");
alert($(obj).serialize());
return true;
}
else{
alert("你的表單還沒有弄好！");
return false;
}
}
</script>