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