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

浏览数：18 / 时间：2015年06月09日

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

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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