js学习笔记（四）表单验证

最新推荐文章于 2020-04-30 20:59:08 发布

默默前行的蜗牛

最新推荐文章于 2020-04-30 20:59:08 发布

阅读量477

点赞数

分类专栏： js学习笔记

本文链接：https://blog.csdn.net/ywf008/article/details/52738229

版权

js学习笔记专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="script63.js"></script>
<style>
	body{
		color:#000;
		background-color:#FFF;
	}
	input.invalid{
		background-color:#FF9;
		border:2px red inset;
	}
	label.invalid{
		color:#F00;
		font-weight:bold;
	}
	select{
		margin-left:80px;
	}
	input{
		margin-left:30px;
	}
	input+select,input+input{
		margin-left:20px;
	}
	.centered{
		text-align:center;
	}
</style>
</HEAD>

<BODY>
<h1 class="centered">Car Picker</h1>
<form action="SomeAction.cgi">
	<p>
	<label for="emailAddr">Email Address:
	<input type="text" size=30 id="emailAddr" class="reqd email">
	</label>
	</p>
	<p><label for="color">Colors:  
		<select id="color" class="reqd">
			<option value="" selected>Choose a color</option>
			<option value="red" >Red</option>
			<option value="green" >Green</option>
			<option value="blue" >Blue</option>
			<option value="silver" >Silver</option>
		</select>
	</label></p>
	<p>
	<label for="sunroof">Options:
		<input type="checkbox" id="sunroof" value="Yes">Sunroof(Two door only)</input>
		</label>
	<label for="powerWindows"><input type="checkbox" id="powerWindows" value="Yes">Power Windows</input>
	</label>
	</p>
	<p>
	<label for="DoorCt" >Doors:   
		<input type="radio" id="twoDoor" name="DoorCt" value="Two">Two</input>
		<input type="radio" id="fourDoor" name="DoorCt" value="Four">Four</input>
	</label>
	</p>
	<p>
	Enter your Zip code or pick the dealer nearest you:<br>
	<label for="zip">Zip:<input type="text" size="5" maxlength="5" id="zip" class="isZip dealerList"></label>
	<select id="deakerList" class="zip" size=4>
		<option value="Califomia-Lemon Grove">Califomia-Lemon Grove</option>
		<option value="Califomia-Lomita">Califomia-Lomita</option>
		<option value="Califomia-Long Beach">Califomia-Long Beach</option>
		<option value="Califomia-Los Alamitos">Califomia-Los Alamitos</option>
	</select>
	</p>
	<input type="submit" value="submit">  
	<input type="reset" value="reset">
	</form>
</BODY>
</HTML>

//有效性检查
window.οnlοad=initForm;

function initForm(){
	for(var i=0;i<document.forms.length;i++){
		document.forms[i].οnsubmit=validForm;

	}

}

function validForm(){
	var allGood = true;
	var allTags = document.getElementsByTagName("*");
	for(var i=0;i<allTags.length;i++){
		if(!validTag(allTags[i])){
			allGood = false;
		}
	}
	return allGood;
	function validTag(thisTag){
		var outClass = "";
		var allClasses = thisTag.className.split(" ");
		for(var j=0;j<allClasses.length;j++){
			outClass+=validBasedOnClass(allClasses[j])+" ";
		}
		thisTag.className=outClass;
		if(outClass.indexOf("invalid")>-1){
			invalidLabel(thisTag.parentNode);
			thisTag.focus();
			if(thisTag.nodeName=="INPUT"){
				thisTag.select();
			}
			return false;
		}
		return true;
		function validBasedOnClass(thisClass){
			var classBack="";
			switch(thisClass){
				case "":
				case "invalid":
					break;
				case "reqd":
					if(allGood&&thisTag.value==""){
						classBack = "invalid ";
				}
				classBack+=thisClass;
				break;
				case "centered":
				case "radio":
				case "isNum":
				case "isZip":
				case "email":
					classBack+=thisClass;
				break;
				default:
					if(allGood&&!crossCheck(thisTag,thisClass)){
							classBack="invalid ";
				}
					classBack+=thisClass;
			}
			return classBack;
		}

		function crossCheck(inTag,otherFieldID){
			if(!document.getElementById(otherFieldID)){
					return false;
			}
			//return (inTag.value==document.getElementById(otherFieldID).value);
			return (inTag.value!=""||document.getElementById(otherFieldID).value!="");
		}
		function invalidLabel(parentTag){
				if(parentTag.nodeName=="LABEL"){
					parentTag.className+=" invalid";
				}
		}
	}
}

脚本中SomeAction.cgi只是一个CGI程序的示例名称，（其字面意思是某种操作）可以执行需要的任何操作。