日期:2014-05-16  浏览次数:20320 次

自制表单js验证代码,大家给意见

以下是js验证部分代码:

<script language="javascript" type="text/javascript">
  //用户名验证
    function checkUsername(){
	    var username = document.getElementById("username").value;
		var usernameMsg = document.getElementById("usernameMsg");
		if(username.length>=4&&username.length<=15){
		   usernameMsg.innerHTML="<font color=green>此用户名可以使用</font>";
		}else{
		   usernameMsg.innerHTML="<font color=red>此用户名输入有误!</font>"; 
		}
	}

//密码验证
	function checkPassword(){
	   var password = document.getElementById("password").value;
		var passwordMsg = document.getElementById("passwordMsg");
		if(password.length>=6&&password.length<=20){
		   passwordMsg.innerHTML="<font color=green>此密码可以使用</font>";
		}else{
		   passwordMsg.innerHTML="<font color=red>此密码输入有误!</font>";
		}
	}
//重复密码验证
	function checkPassword2(){
	    var password = document.getElementById("password").value;
		var password2 = document.getElementById("password2").value;
		var passwordMsg2 = document.getElementById("passwordMsg2");
		if(password2!=""){
		   if(password==password2){
			   passwordMsg2.innerHTML="<font color=green>确认密码正确</font>";
			}else{
			   passwordMsg2.innerHTML="<font color=red>两次输入的密码不相等!</font>";
			}
		}else{
		   passwordMsg2.innerHTML="<font color=red>密码不能为空!</font>";
		}
	}
//邮箱验证
	function checkEmail(temp){
	  var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
	  var emailMsg = document.getElementById("emailMsg");
		if(reg.test(temp)){
		   emailMsg.innerHTML="<font color=green>你的邮箱可用</font>";
		}else{
		   emailMsg.innerHTML="<font color=red>请输入正确的邮箱!</font>";
		}
	}
//姓名验证
	function checkRealName(temp) 
	{ 
		var reg=/[\u4E00-\u9FA5]/g;
		var realNameMsg = document.getElementById("realNameMsg");
		if (reg.test(temp)){
		    realNameMsg.innerHTML="<font color=green>姓名可以使用</font>";
		}else{
		    realNameMsg.innerHTML="<font color=red>姓名要求为汉字!</font>";
		} 
	} 
//昵称验证
   function checkRealName2()
   {
        var realName2 = document.getElementById("realName2").value;
		var realNameMsg2 = document.getElementById("realNameMsg2");
		if(realName2=="")
		{
		  realNameMsg2.innerHTML="<font color=red>昵称不能为空!</font>";
		}else{
		   realNameMsg2.innerHTML="<font color=green>昵称可以使用</font>";
		}
   }
   //联系电话验证
var mobile = /^(?:13\d|15[89])-?\d{5}(\d{3}|\*{3})$/;
var phoneMag = document.getElementById("phoneMag");

function checkPhone(temp) {  
        //var mobile = /^(((d{2,3}))|(d{3}-))?13d{9}$/;
		var phoneMsg = document.getElementById("phoneMsg");
        if(mobile.test(temp))  
		   {  
            phoneMsg.innerHTML="<font color=red>&nbsp;</font>";   
        } 
        else {  
            phoneMsg.innerHTML="<font color=red>请输入正确的手机号码</font>";
              
        }          
    }

</script>

?以下是表单代码:

<form action="http://www.baidu.com" method="post" onSubmit="">
 <table width="700px"  border="0" align="center" ;> 
 <tr> 
<td width="30%" height="40"><font size="3"><b>普通用户</b></font></td> 
<td width="70%" height="40">&nbsp; 
</td> 
</tr> 
<tr> 
<td width="30%" height="40">*用户名:</td> 
<td width="70%" height="40"><input name="username" type="text" id="username" value="" onblur="checkUsername()"  maxlength= "15">
&nbsp;<span id="usernameMsg"><font color="#818181">4-15个字符(包括英文字母,数字,下划线)</font></span>
</td> 
</tr> 

<tr> 
<td height="40">*密码:</td> 
<td height="40"><input name="password" type="password" id="password" onblur="checkPassword()">
&