用户名、邮箱验证



 

 

附上一张效果图

 

用户名、邮箱验证_第1张图片

 

 

 

<!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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>无标题文档</title>
  <style>
  .errMsg{font-size:12px; color:#F00;}
  </style>
  <script>
  function nameerr(){
  var nameval = document.getElementById("userName").value;
  var reg = /^[a-z|A-Z]{1}[a-z|A-Z|0-9|_]{5,19}$/;
  //alert(reg.test(nameval));
  if(reg.test(nameval)){
   
  clearErr("userNameCk");
  return true;
  }else{
  document.getElementById("userNameCk").style.display="";
  document.getElementById("userNameCk").innerHTML = "用户名非法";
  return false;
  }
   
  }
   
  function clearErr(eleId){
  document.getElementById(eleId).style.display="none";
  }
   
  function verifyEmail(){
  var emailval = document.getElementById("email").value;
  var reg = /^[a-zA-Z][a-zA-Z0-9_-]*@([a-zA-Z0-9_-]+.)+(com|gov|net|com.cn|edu.cn)$/;
  //alert(reg.test(emailval));
  if(reg.test(emailval)){
  clearErr("emailCk");
  return true;
  }else{
  document.getElementById("emailCk").style.display="";
  document.getElementById("emailCk").innerHTML = "邮箱地址非法";
  return false;
  }
  }
   
  function regist(){
  if(nameerr()&&verifyEmail()){
  alert("注册成功!");
  document.form1.submit();
  }else{
  alert("注册失败!");
  }
   
  }
  </script>
  </head>
   
  <body>
  <form id="form1" name="form1" method="get" action="http://www.baidu.com">
  <table align="center" width="580" border="1" cellspacing="0" cellpadding="2">
  <tr>
  <td width="125">用户名</td>
  <td width="262"><label for="userName"></label>
  <input type="text" name="userName" id="userName" onblur="nameerr();" onfocus="clearErr('userNameCk');" /></td>
  <td width="173"><div id="userNameCk" class="errMsg"></div></td>
  </tr>
  <tr>
  <td>邮箱</td>
  <td><label for="email"></label>
  <input type="text" name="email" id="email" onblur="verifyEmail();" onfocus="clearErr('emailCk');" /></td>
  <td><div id="emailCk" class="errMsg"></div></td>
  </tr>
  <tr>
  <td align="center" colspan="3"><input type="button" name="reg" id="reg" value="注册" onclick="regist();"/></td>
  </tr>
  </table>
  </form>
  </body>
  </html>
 

你可能感兴趣的:(JavaScript,XHTML)