100分求助一个关于表单验证的问题

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>



<style>

* {margin:0; padding:0;}

.pass-label {height:42px; width:80px; line-height:42px; text-align:right; float:left; clear:both; font-size:14px; font-weight:bold; margin-right:10px; font-family:"宋体";}

input {height:40px; line-height:40px; float:left; border:1px solid #ccc; font-size:13px; width:300px; padding-left:5px;}

p:after {content:""; visibility:hidden; display:block; font-size:0; height:0; clear:both;}

p {margin-bottom:15px;}

.regbtn {height:50px; width:307px; font-size:15px; font-weight:bold; background:#3f89ec; color:#fff; margin-left:90px;}

.regbtn:hover {background:#4490f7;}

p span {line-height:42px; margin-left:407px;}

.pass-error {color:red;}

.pass-succ {color:green;}

.pass-tip {color:#b4b4b4;}

</style>



<script>

//仿jQuery选择器



function $(selector, content){

	

	content = content || document;

	

	var sTag = selector.charAt(),

		arr = [],

		allName = content.getElementsByTagName("*");

		

	if(sTag === "#"){

		

		selector = selector.substring(1);

		

		return content.getElementById(selector);

		

	}else if (sTag === "."){

		

		selector = selector.substring(1);

		

		for(var i=0;i<allName.length;i++){

			

			var reg=new RegExp("\\b"+selector+"\\b","i");

			if(reg.test(allName[i].className))arr.push(allName[i]);

			

		}

		return arr;

	}

	else return content.getElementsByTagName(selector);

}





				/*对象，提示，位置，成功，错误，提示信息，成功信息，错误信息，回调函数, 返回参数*/

function check (obj, aTip, num, aSucc, aError, sTip, sSucc, sError, fnCallback, a){

	

	obj.onfocus=function(){

		

		aTip[num].style.display="block";	aTip[num].innerHTML=sTip;

		aSucc[num].style.display="none";	aSucc[num].innerHTML="";

		aError[num].style.display="none";	aError[num].innerHTML="";

	};

	

	obj.onblur=function(){

		

		aTip[num].style.display="none";		aTip[num].innerHTML="";

		

		if(fnCallback(this.value)){

			

			aSucc[num].style.display="block";	aSucc[num].innerHTML=sSucc;

			aError[num].style.display="none";	aError[num].innerHTML="";

		}else

		{

			aSucc[num].style.display="none";	aSucc[num].innerHTML="";

			aError[num].style.display="block";	aError[num].innerHTML=sError;

		}

	};

	

	if(a=="click")

		obj.onblur();

}



window.onload=regs;



function regs(a){

	

	var state=true;

	

	var oUserName=document.getElementsByName("username")[0],

		oPwd=document.getElementsByName("pwd")[0],

		oConfirmPwd=document.getElementsByName("confirmpwd")[0],

		oEmail=document.getElementsByName("email")[0],

		aTip=$(".pass-tip"),

		aSucc=$(".pass-succ"),

		aError=$(".pass-error");

	

	

	check (

	

		/*对象，提示，位置，成功，错误，提示信息，成功信息，错误信息，回调函数, 返回参数*/

		oUserName, aTip, 0, aSucc, aError, "请输入3-20位用户名，英文、字母或下划线", "输入正确", "输入错误", 

		

		function(val){

		

			if(val.match(/^\w{3,20}$/)){return true;}else{state=false; return false;} 	

		}, a);

		

		console.log(state);

	

	check (

	

		oPwd, aTip, 1, aSucc, aError, "请输入6-20位密码，英文和数字", "输入正确", "输入错误", 

		

		function(val){

		

			if(val.match(/^[0-9A-Za-z]{6,20}$/)){return true;}else{state=false; return false;} 	

		}, a);

		

		console.log(state);

	

	check (

	

		oConfirmPwd, aTip, 2, aSucc, aError, "请再次输入密码", "输入正确", "密码不一致", 

		

		function(val){

		

			if(oConfirmPwd.value.match(/^[0-9A-Za-z]{6,20}$/) && oConfirmPwd.value == oPwd.value){return true;}else{state=false; return false;} 	

		}, a);

		

		console.log(state);

	

	check (

	

		oEmail, aTip, 3, aSucc, aError, "请输入邮箱地址", "输入正确", "邮箱格式不正确", 

		

		function(val){

		

			if(val.match(/^[a-z0-9]{1}\w+@\w+\.\w+[a-z0-9]{1}$/i)){return true;}else{state=false; return false;} 	

		}, a);

		

	console.log(state);

	return state;

};

</script>

</head>



<body>

<form action="reg.php" method="post" style="margin:20px 0 0 20px;" onsubmit="return regs("click");">



    <p>

        <label class="pass-label" for="username">用户名: </label>

        <input type="text" name="username" value="" placeholder="请输入用户名">

        <span class="pass-error pass-error-username" style="display:none;"></span>

        <span class="pass-succ pass-succ-username" style="display:none;"></span>

        <span class="pass-tip pass-tip-username" style="display:none;"></span>

    </p>

    

    <p>

        <label class="pass-label" for="pwd">密码: </label>

        <input type="password" name="pwd" value="" placeholder="请输入密码">

        <span class="pass-error pass-error-pwd" style="display:none;"></span>

        <span class="pass-succ pass-succ-pwd" style="display:none;"></span>

        <span class="pass-tip pass-tip-pwd" style="display:none;"></span>

    </p>

    

    <p>

        <label class="pass-label" for="confirmpwd">确认密码: </label>

        <input type="password" name="confirmpwd" value="" placeholder="确认密码">

        <span class="pass-error pass-error-confirmpwd" style="display:none;"></span>

        <span class="pass-succ pass-succ-confirmpwd" style="display:none;"></span>

        <span class="pass-tip pass-tip-confirmpwd" style="display:none;"></span>

    </p>

    

   <p>

        <label class="pass-label" for="email">邮箱: </label>

        <input type="text" name="email" value="" placeholder="请输入邮箱">

        <span class="pass-error pass-error-email" style="display:none;"></span>

        <span class="pass-succ pass-succ-email" style="display:none;"></span>

        <span class="pass-tip pass-tip-email" style="display:none;"></span>

    </p>

    

   <p>

    <input class="regbtn" type="submit" value="注册">

    </p>

	

</form>









</body>

</html>