【jQuery】无须id、name与class等属性，直接对表单中的所有表单项进行遍历、判断、检验

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

虽然看上去好像很爽的样子，尤其在一些具有超过单行文本框<input type="text" />、多行文本框<textarea>等页面，但是，遇到一些需要特定判断的页面，你还不如设置一个id，直接通过id来取，简单方便，不用考虑遍历问题这么艰难。这种方法只是尤其使用于那些超多文本框的页面，但你又不想连用服务器语言什么aspx,jsp,php设置N个id的情况。例如，利用这个方法能够改进《【JavaScript】表单提交之前的前台处理检查三部曲》（点击打开链接），代码就不用写这么长了嘛！同时，这种方法是能够对限定表单作用，不想网上的一些方法，一旦遍历就要遍历整个页面。

一、基本目标

如下例子。如果哪个文本框的字数超标，或者为空，马上给出提示，同时这个文本框的边框颜色变红，并且告警。这里是能够对限定表单作用，无论表单以外的输入框输了写什么都不参与验证。

技术分享

二、HTML布局

很简单，只是希望大家注意到，这里设置了一个div放错误信息。同时设置了一个在表单外的输入框。另外，表单内的所有输入框、多行文本框，没有任何id、name与class等属性，但我还是能够进行判断。

<!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" />
<title>无ID检验</title>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
</head>

<body>
<div id="errorMsg" style="color:#ff0000;"></div>
表单以外：<input type="text" /><br />
表单以内：
<form action="" method="post" onsubmit="return submitPreprocessing(this)">
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<textarea rows="10" cols="20" wrap="virtual"></textarea><br />
<input type="submit" value="Go!" />
</form>
</body>
</html>

三、jQuery脚本

1、根据onsubmit属性传递过的form表单进行检验

2、这里其实有点《【JavaScript】原生态兼容IE6的图片轮播》（点击打开链接）的分页思想。如果不符合要求的表单项告警、提交判断的布尔值设置为false之外，记得要把符合要求的表单项恢复原状。不然用户不干了，但是错误信息则不用理他。因为用户每次点击submit按钮，errMsg变量都会变清空。

3、利用$(obj).find("input[type=‘text‘]").each()方法能够对所有单行文本框进行遍历，其余表单项同理。each()里面的参数可以是函数，这里就是我们的判断函数。这个函数里面的this就是每一个遍历项。

4、function getStrLength()是用来区分英文与中文计数的，英文的算一个字符，中文算2个字符。

<script>
function submitPreprocessing(obj){
	var isFormOK=true;
	var i=0;
	var j=0;
	var errMsg="";
	$(obj).find("input[type='text']").each(function (){
		i++;
		if(getStrLength($(this).val())==0){
			errMsg+="第"+i+"单行文本框为空！";
			$(this).css("border","2px solid #ff0000");
			isFormOK=false;	
		}
		else if(getStrLength($(this).val())>10){
			errMsg+="第"+i+"单行文本框字数多于5！";
			$(this).css("border","2px solid #ff0000");
			isFormOK=false;	
		}
		else{
			$(this).css("border","1px solid #cccccc");	
		}
	});
	$(obj).find("textarea").each(function (){
		j++;
		if(getStrLength($(this).html())==0){
			errMsg+="第"+j+"多行文本框为空！";
			$(this).css("border","2px solid #ff0000");
			isFormOK=false;
		}
		else if(getStrLength($(this).html())>20){
			errMsg+="第"+j+"多行文本框字数多于10！";
			$(this).css("border","2px solid #ff0000");
			isFormOK=false;
		}
		else{
			$(this).css("border","1px solid #cccccc");	
		}
	});
	if(!isFormOK){
		$("#errorMsg").html(errMsg+"请修改！");
		return false;
	}
	else{
		alert("谢谢你的填写！");
		$("#errorMsg").html("");
		return false;
	}
}

function getStrLength(str) {
	var mylen = 0;
	for (var i = 0; i < str.length; ++i) {
		if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128) {
			++mylen;
		} else {
			mylen += 2;
		}
	}
	return mylen;
}
</script>

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

【jQuery】无须id、name与class等属性，直接对表单中的所有表单项进行遍历、判断、检验