js高级编程------------使用prototype仿java对象实现表单验证_class.prototype.setchecked = function(-优快云博客

本文链接：https://blog.youkuaiyun.com/yaerfeng/article/details/6958979
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>xmlT5-JS高级编程</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.imgs{
width:20px;
height:20px;
}
</style>
		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script type="text/javascript">
	var $ = document.getElementById;
	function Check(formId, fieldNum, submitId, validImg, invalidImg) {
		//currentSelector属性指向需要验证的表单
		this.currentSelector = '';
		//currentForm属性指向表单所在的form
		this.currentForm = formId;
		this.num = 0 ;
		this.numToValid = fieldNum;
		this.submit = submitId;
		this.validImg = validImg;
		this.invalidImg = invalidImg;
		$(formId).reset();
	}
	
	Check.prototype.preload=function(selector){
		if(selector){
			if(!this.currentSelector.validImg && !this.currentSelector.invalidImg){
				this.currentSelector.validImg=createNode('img',{src:this.validImg});
				this.currentSelector.invalidImg=createNode('img',{src:this.invalidImg});
			}
			if(this.currentSelector.isValid==undefined){
				this.currentSelector.isValid=false;
			}
		}
	}
	
	//e为要添加的html元素，例如IMG.obj是要创建的元素的属性集合。例 如img的属性src
	function createNode(e,obj){
  		var newNode=document.createElement(e);
  		//newNode.setAttribute=obj;不知道为什么不行。只能这样了。
 		newNode.src=obj['src'];
 		newNode.className="imgs";
 		 return newNode;
	}
	
	function removeNode(node){
		if(node.parentNode!=null){
	 		node.parentNode.removeChild(node);
	 	}
	}
	
	//parent需要添加元素的父元素，newNode需要添加的元素，refNode需要添加元素的相关元素，决定添加元素的位置
	function InsertAfter(parent,newNode,refNode){
   		 if (parent.lastChild == refNode) {
       	 // 如果最后的节点是目标元素，则直接添加。因为默认是最后
       		 parent.appendChild(newNode);
   		 } else {
    		//如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面。
       		 parent.insertBefore(newNode,refNode.nextSibling);
   		 }
	}
	
	Check.prototype.check=function (selector,inputType){
		//this指向Check类的某个对象
		this.currentSelector=selector;
		this.preload(selector);
		var isCheck=false;
		switch(selector.type){
			case 'undefined':
				break;
			case 'radio':
				for(var x=0;x<selector.length;x++){
					if(selector[x].checked==true){
						isCheck=true;
						break;
					}
				}
				case 'select-one':
					if(selector.length>0){
						isCheck=true;
						break;
					}
				case 'select-multiple':
					for(var x=0;x<selector.length;x++){
						if(selector[x].selected==true){
							isCheck=true;
							break;
						}
					}
				case 'checkbox':
					if(selector.checked==true){
						isCheck=true;
						break;
					}
					default://text
						if(selector.value.length>0){
							if(selector.value.length<=selector.maxLength){
								switch(inputType){
									case 'email':
										isCheck=this.checkEmail();
										break;
									case 'name':
										isCheck=this.checkName();
										break;
									case 'pwd':
										isCheck=this.checkPwd();
										break;
									case 'telPhone':
										isCheck=this.checkTelPhone();
										break;
									default:
										isCheck=true;
										break;
								}
							}
							else{
								break;
							}
						}
						else{
							break;
						}
		}
		if(isCheck){
			this.valid();
		}else{
			this.invalid();
		}
	}
	
	Check.prototype.checkEmail=function(){
		var str=this.currentSelector.value;
		var reg=new RegExp("^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*@(([0-9a-zA-Z])+([-\w]*[0-9a-zA-Z])*\.)+[a-zA-Z]{2,9}){1}quot;);
		if(reg.test(str))
		{
			return true;
		}
		return false;
	}
	
	Check.prototype.checkPwd=function(){
		var str=this.currentSelector.value;
		var reg=new RegExp("^[a-zA-Z\d]{6,16}");
		if(reg.test(str))
		{
			return true;
		}
		return false;
	}
	
	Check.prototype.checkName=function(){
		var str=this.currentSelector.value;
		var reg=new RegExp("^[a-zA-Z]{1}[\w]{4,16}[a-zA-Z0-9]{1}");
		if(reg.test(str))
		{
			return true;
		}
		return false;
	}
	
	Check.prototype.checkTelPhone=function(){
		var str=this.currentSelector.value;
		var reg=new RegExp("^[0-9]{11}{1}quot;);
		if(reg.test(str))
		{
			return true;
		}
		return false;
	}
	
	Check.prototype.valid=function(){
		removeNode(this.currentSelector.invalidImg);	
		InsertAfter(this.currentSelector.parentNode,this.currentSelector.validImg,this.currentSelector);
		if(!this.currentSelector.isValid){
			this.num++;
		}
		if(this.allFieldsChecked()){
			$(this.submit).disabled=null;
		}
		//在preload方法中添加的属性
		this.currentSelector.isValid=true;
	}
	
	Check.prototype.invalid=function(){
		removeNode(this.currentSelector.validImg);
		InsertAfter(this.currentSelector.parentNode,this.currentSelector.invalidImg,this.currentSelector);
		if(this.currentSelector.isValid){
			this.num--;
		}
		$(this.submit).disabled="disabled";
		//在preload方法中添加的属性
		this.currentSelector.isValid=false;
	}
	
	Check.prototype.allFieldsChecked=function(){
		//如果验证全部通过
		if(this.num==this.numToValid){
			return true;
		}
		return false;
	}
	
</script>
	</head>

	<body
		οnlοad="ck=new Check('liveForm',5,'submit','images/1.png','images/2.png');">
		<form id="liveForm" action="" method="post"
			οnsubmit="if(!ck.allFieldsChecked()) return false;">
			<fieldset>
				<div style="float: right;">
					* 为必填字段
				</div>
				<legend>
					测试验证框架
				</legend>
				<p>
					姓名：*
					<br />
					<input type="text" id="name" name="name" οnblur="ck.check(this);"
						maxlength="10">
				</p>
				<p>
					密码：*
					<br />
					<input type="password" id="pwd" name="pwd"
						οnblur="ck.check(this,'pwd');" maxlength="10">
				</p>
				<p>
					Email：*
					<br />
					<input type="text" id="email" name="email"
						οnblur="ck.check(this,'email');" maxlength="40">
				</p>
				<p>
					省份：*
					<br />
					<select id="pro" οnchange="ck.check(this,'pro');" name="pro">
						<option>湖北省</option>
						<option>湖南省</option>
						<option>河北省</option>
						<option>河南省</option>
					</select>
				</p>
				<p>
					电话号码：*
					<br />
					<input type="text" id="telPhone" name="telPhone"
						οnblur="ck.check(this,'telPhone');">
				</p>
			</fieldset>
			<div id="innerFieldset">
				<noscript>
					<input id="submit" type="submit" value="Register" class="action" />
				</noscript>
			</div>
			<script type="text/javascript">
				$('innerFieldset').innerHTML='<input id="submit" type="submit" value="Register"  disabled="disabled" />';
			</script>
		</form>
	</body>
</html>
验证用到的两张图片。