代码改变世界

注册js验证

2010-09-29 13:17  yuejianjun  阅读(555)  评论(0)  编辑  收藏  举报

JS:

代码
 
///邮箱验证
function isEmail(txtEmail,pIsEmail)
{    
     var bEmail=true;
     var  txtEmail = document.getElementById(txtEmail);   
     var  isEmail = document.getElementById(pIsEmail);   
     if(trim(txtEmail.value).length>50)
     {
           isEmail.innerHTML="邮箱不能超过50个字符"
           isEmail.style.color="Red";
           bEmail=false;
     }
     else if(!CheckEmail(trim(txtEmail.value))) 
     { 
         isEmail.innerHTML="请输入正确的Email "
         isEmail.style.color="Red"; 
         bEmail=false; 
     }
     else
     {
           isEmail.innerHTML="该邮箱可用 "
           isEmail.style.color="#3fa156"; 
           bEmail=true;
     }
     return bEmail;
}
//验证用户名是否为空
function isUserEmpty(txtUser,pIsUser)
{   
 var  txtUser = document.getElementById(txtUser);  
 var  isUser = document.getElementById(pIsUser); 
if(trim(txtUser.value).length==0)
{
isUser.style.color="Red";
isUser.innerHTML="用户名不能为空"; 
return false;
}
else if(trim(txtUser.value).length>50)
{
isUser.style.color="Red";
isUser.innerHTML="用户名超过了50个字符"; 
return false;
}
else
{
isUser.style.color="#3fa156";
isUser.innerHTML="用户名可用"; 
return true;
} 
}
///密码验证
function isPassword(txtpw,pIspw)
{    
 var  txtpw= document.getElementById(txtpw);  
 var  ispw= document.getElementById(pIspw);  
if(trim(txtpw.value).length<6||trim(txtpw.value).length>20) 
{
ispw.style.color="Red";
ispw.innerHTML="密码必须6-20个字符"; 
return false;
}
else
{ 
    ispw.innerHTML="该密码可用 ";
    ispw.style.color="#3fa156";
   return true; 
}
}
//重复密码验证
function isRpw(txtRpw,pIspw,txtpw)
{
 var  txtRpw= document.getElementById(txtRpw);  
 var  ispw= document.getElementById(pIspw);  
 var  txtpw= document.getElementById(txtpw);

if(trim(txtRpw.value).length<6||trim(txtRpw.value).length>20) 
{
ispw.style.color="Red";
ispw.innerHTML="密码必须6-20个字符"; 
return false;
}
else if(trim(txtRpw.value)!=trim(txtpw.value)) 
{
    ispw.innerHTML="重复密码错误 ";
    ispw.style.color="Red";
    return false;  
} 
else
{
    ispw.innerHTML="重复密码正确 ";
    ispw.style.color="#3fa156";
    return true;
}
}
//注册提交
function Reg()   
{    
 var  isReg=isEmail('txtRegEmail','isEmail')&&isUserEmpty('txtRegUserName','isUserName')&&isPassword('txtRegPw','isRegPw')&&isRpw('txtRpw','isRpw','txtRegPw');
   if(isReg)
   {
   alert("前台验证成功！");
   }
   else
   {
   alert("前台验证失败");
   }
}  
function trim(objvalue)
{
    return objvalue.replace( /(^\s*)|(\s*$)/g , '' ); 
} 
  
function closeLogin()
{
   var  Login = document.getElementById("Login");
    Login.style.display='none';  
   var objDeck = document.getElementById("YUEdeck"); 
       objDeck.style.display='none';  
}
function closeReg()
{
   var  Reg = document.getElementById("Reg");
    Reg.style.display='none';  
      var objDeck = document.getElementById("YUEdeck"); 
       objDeck.style.display='none';   
}

 
//检查Email格式
function CheckEmail(value)
{
    objvalue = value.toLowerCase()
    var regu = "^(([0-9a-zA-Z]+)|([0-9a-zA-Z]+[_.0-9a-zA-Z-]*))@([a-zA-Z0-9-]+[.])+([a-zA-Z]{2,4})$";
    var re = new RegExp( regu );
    if( objvalue.search( re ) != -1 ){
        return true;
    }else{
        return false;
    }
}

 

HTML:

<!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><title>
无标题页
</title>
<script type ="text/javascript" src ="regJS.js" ></script>
<style type ="text/css" >
body{margin:0px; padding:0px;line-height:22px;font-size:13px;color:#222222; font-family: Verdana,宋体;}
div,p,span
{
border :0px;
padding :0px;
margin :0px;
}
/*注册，登陆*/
.reg{width :580px; height :230px; border :3px #dddddd solid; background-color :#ffffff; text-align :left ; }
.reg_p{margin :10px; background-color :#dddddd; height :40px; line-height :40px; font-weight :bold ; font-size :14px; }
.reg_span{float :left ;color :#3fa156; padding-left :10px;}
.reg_close{float :right ; padding-right :10px; color :Red ; padding-top :8px;}
.reg_d{margin-left :30px; margin-top :10px;}
.p_reg{ float :left ; padding-left :120px;}
.p_close{float :right ; padding-right :30px;}
.p_login{float :left ; padding-left :170px;}
/*注册，登陆*/
</style>
</head>
<body>
<form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGSZlM7ahy/0qhAbXvN1vHXM73RH5w==" />
</div>
<div>
<!--注册-->
<div class="reg" id="Reg" >
<p class="reg_p" > <span class="reg_span" >用户注册</span> <span ><a class="reg_close" href ="javascript:void(0)" onclick ="closeReg();" title ="取消注册">[取消]</a></span></p>
<div class="reg_d" >
<table style="text-align: right; width: 472px;">
<tr>
<td style="width: 68px">Email: <p style ="height :5px;"> </p>
</td>
<td style="width: 158px">
<input id="txtRegEmail" type="text" onblur="isEmail('txtRegEmail','isEmail');" style="width: 250px" /> <p style ="height :5px;"> </p>
</td>
<td ><span id="isEmail" style ="float :left ;"></span></td>
</tr>
<tr> <p style ="height :10px;"> </p>
<td style="width: 68px">用户名:<p style ="height :5px;"> </p>
</td>
<td style="width: 158px">
<input id="txtRegUserName" type="text" onblur="isUserEmpty('txtRegUserName','isUserName');" style="width: 250px" /> <p style ="height :5px;"> </p>
</td>
<td><span id="isUserName" style ="float :left ;"></span></td>
</tr>
<tr>
<td style="width: 68px">密码:<p style ="height :5px;"> </p>
</td>
<td style="width: 158px">
<input id="txtRegPw" type="password" onblur="isPassword('txtRegPw','isRegPw');" style="width: 250px" /><p style ="height :5px;"> </p>
</td>
<td><span id="isRegPw" style ="float :left ;"></span></td>
</tr>
<tr>
<td style="width: 68px">重复密码:<p style ="height :5px;"> </p>
</td>
<td style="width: 158px">
<input id="txtRpw" type="password" onblur="isRpw('txtRpw','isRpw','txtRegPw');" style="width: 250px" /><p style ="height :5px;"> </p>
</td>
<td><span id="isRpw" style ="float :left ;"></span></td>
</tr>
<tr>
<td colspan="2">
<p ><span class="p_reg" >
<input id="hidID" type="hidden" value="" />
<input id="btnReg" type="button" value="注 册" onclick="Reg()" /> </span>
<span class="p_close" ><input id="btnClose" type="button" value="取 消" onclick="closeReg();"/></span></p>
</td>
</tr>
</table>
<p></p>
</div>
</div>
<!--注册-->
</div>
</form>
</body>
</html>