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

最新推荐文章于 2021-10-21 07:55:49 发布

yongh701

最新推荐文章于 2021-10-21 07:55:49 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 遍历表单检验前端

本文链接：https://blog.csdn.net/yongh701/article/details/44703233

JavaScript 专栏收录该内容

58 篇文章

订阅专栏

本文介绍如何使用纯JavaScript实现表单验证，包括遍历表单元素、判断文本框输入的有效性，并通过自定义函数控制错误提示及样式反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章是《【jQuery】无须id、name与class等属性，直接对表单中的所有表单项进行遍历、判断、检验》（点击打开链接）的Javascript，写了jQuery还要补上一个Javascript的目的，是因为Javascript才是根本。以免你把这个表单检验的的jQuery打包之后，每一个网页每次使用，都要引入jQuery，反正我觉得每一个网页除了引入你自己的打包js之外，还要额外地引入一个jQuery，否则脚本无法正常执行。理论上，纯粹Javascript的东西，基本上，对于IE6都能够完美执行！

一、基本目标

与上文完全一样的效果，只是这个故意多用FireFox测运行，以免网上有人总是说利用JavaScript在野狐禅中取不到textarea的值，导致无法正常判断。其实在任何浏览器，利用value都可以取到。

这是IE的效果，至于Google就不用测了，这个浏览器必须兼容：

二、HTML布局

完全就是跟上文jQuery版的一模一样，一个字都没有改，同样是所有表单项没有id、name与class等属性。并且请大家注意，这里完全没有用到JQuery。

<!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>无标题文档</title>
</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>

三、JavaScript脚本

这个脚本是本文的关键。具体见注释。逻辑与Jquery相似，只是请注意JavaScript在遍历的时候利用getElementsByTagName，不懂的可以参考《【JavaScript】利用getElementsByTagName与getElementsByName改进原生态兼容IE6标签页》（点击打开链接），取出form节点下的input集合。再利用input的type属性，判断是否是我们想要的东西。而textarea的值不要见它是双标签，必须用value来取就在各大浏览器都没有问题。不要像网上一样区分IE就用firstChild.NodeValue，火狐就用innerHTML，这样是不给力的。

<script>
//obj就是传递过来的表单
function submitPreprocessing(obj){
	var isFormOK=true;
	var errMsg="";
	//取出所有input节点，形成一个数组
	var inputArr=obj.getElementsByTagName("input");
	for(var i=0;i<inputArr.length;i++){
		//如果input的type是text，就是说，如果是单行文本框的话
		if(inputArr[i].type=="text"){
			//判断其输入的值的长度，不符合则边框变色，加上不能提交的flag
			if(getStrLength(inputArr[i].value)==0){
				errMsg+="第"+(i+1)+"单行文本框为空！";
				inputArr[i].style.border="2px solid #ff0000";
				isFormOK=false;	
			}
			else if(getStrLength(inputArr[i].value)>10){
				errMsg+="第"+(i+1)+"单行文本框多于5！";
				inputArr[i].style.border="2px solid #ff0000";
				isFormOK=false;					
			}
			//否则，符合记得还原。因为现在在遍历。提交的flag与errMsg则不用管它。因为每次点击提交按钮都会初始化。
			else{
				inputArr[i].style.border="1px solid #cccccc";				
			}
		}
	}
	//多行文本框同理
	var textareaArr=obj.getElementsByTagName("textarea");
	for(var i=0;i<textareaArr.length;i++){
		if(getStrLength(textareaArr[i].value)==0){
			errMsg+="第"+(i+1)+"单行文本框为空！";
			textareaArr[i].style.border="2px solid #ff0000";
			isFormOK=false;	
		}
		else if(getStrLength(textareaArr[i].value)>20){
			errMsg+="第"+(i+1)+"单行文本框多于10！";
			textareaArr[i].style.border="2px solid #ff0000";
			isFormOK=false;					
		}
		else{
			textareaArr[i].style.border="1px solid #cccccc";				
		}	
	}
	if(!isFormOK){
		document.getElementById("errorMsg").innerHTML=errMsg+"请修改！";
		return false;
	}
	else{
		alert("谢谢你的填写！");
		document.getElementById("errorMsg").innerHTML="";
		return false;
	}
	
}
//这是用来判断字符长度的函数，中文算2个字，英文算1个字
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>