【jQuery】利用表单的序列化根据name取表单，做表单的验证

来源：互联网发布：初中语文软件编辑：程序博客网时间：2024/05/18 01:36

在前台做表单的验证的方式有很多种，具体思想是你先要把表单的要验证项里面的值取出来，然后再脚本处进行判断，最后根据判断结果告警，然后给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>

0 0