使用正则表达式验证注册页面（用户名，密码，确认密码，邮箱，手机号） 

<style type="text/css">
body{
    margin:0;
    padding:0;
    font-size:12px;
    line-height:20px;
}
.main{
    width:525px;
    margin-left:auto;
    margin-right:auto;
    }
.hr_1 {
    font-size: 14px;
    font-weight: bold;
    color: #3275c3;
    height: 35px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #3275c3;
    vertical-align:bottom;
    padding-left:12px;
}
.left{
    text-align:right;
    width:80px;
    height:25px;
    padding-right:5px;
    }
    
.center{
    width:135px;
    }
.in{
    width:130px;
    height:16px;
    border:solid 1px #79abea;
    }

.red{
    color:#cc0000;
    font-weight:bold;
    }

div{
    color:#F00;
    }    
</style>
<script src="js/check.js">


</script>
</head>

<body>
<table class="main" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="images/logo.jpg" alt="logo" /><img src="images/banner.jpg" alt="banner" /></td>
  </tr>
  <tr>
    <td class="hr_1">新用户注册</td>
  </tr>
  <tr>
    <td style="height:10px;"></td>
  </tr>
  <form action="" method="post" name="myform">
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="left">用户名：</td>
    <td class="center"><input id="user" type="text" class="in" onblur="checkUser()" /></td>
    <td><div id="user_prompt">用户名由英文字母和数字组成的4-16位字符，以字母开头</div></td>
  </tr>
  <tr>
    <td class="left">密码：</td>
    <td class="center"><input id="pwd" type="password" class="in"  onblur="checkPwd()"/></td>
    <td><div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div></td>
  </tr>
  <tr>
    <td class="left">确认密码：</td>
    <td class="center"><input id="repwd" type="password" class="in"  onblur="checkRepwd()"/></td>
    <td><div id="repwd_prompt"></div></td>
  </tr>
   <tr>
    <td class="left">电子邮箱：</td>
    <td class="center"><input id="email" type="text" class="in"  onblur="checkEmail()"/></td>
    <td><div id="email_prompt"></div></td>
  </tr>
    <tr>
    <td class="left">手机号码：</td>
    <td class="center"><input id="mobile" type="text" class="in" onblur="checkMobile()" /></td>
    <td><div id="mobile_prompt"></div></td>
  </tr>
   <tr>
     <td class="left">&nbsp;</td>
     <td class="center"><input name="" type="image" src="images/register.jpg" /></td>
     <td>&nbsp;</td>
   </tr>
</table>
</td>
  </tr>
  </form>
</table>

</body>
// JavaScript Document

function $(elementId){
  return document.getElementById(elementId).value;
    }
function divId(elementId){
  return document.getElementById(elementId);
    }
/*用户名验证*/    
function checkUser(){
  var user=$("user");
  var userId=divId("user_prompt");
   userId.innerHTML="";    
  var reg=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;    
    if(reg.test(user)==false){
       userId.innerHTML="用户名不正确";
    return false;
      }
      return true;
    }
/*密码验证*/    
function checkPwd(){
  var pwd=$("pwd");
  var pwdId=divId("pwd_prompt");
   pwdId.innerHTML="";    
  var reg=/^[a-zA-Z0-9]{4,10}$/;    
    if(reg.test(pwd)==false){
       pwdId.innerHTML="密码不能含有非法字符，长度在4-10之间";
    return false;
      }
      return true;
    }
    
function checkRepwd(){
  var repwd=$("repwd");
  var pwd=$("pwd");
  var repwdId=divId("repwd_prompt");
   repwdId.innerHTML="";
    if(pwd!=repwd){
       repwdId.innerHTML="两次输入的密码不一致";
    return false;
      }
      return true;
    }

/*验证邮箱*/
function checkEmail(){
  var email=$("email");
  var email_prompt=divId("email_prompt");
  email_prompt.innerHTML="";
  var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;    
    if(reg.test(email)==false){
      email_prompt.innerHTML="Email格式不正确，例如web@sohu.com";
    return false;
      }
      return true;
}
/*验证手机号码*/
function checkMobile(){
    var mobile=$("mobile");
    var mobileId=divId("mobile_prompt");
    var regMobile=/^1\d{10}$/;
    if(regMobile.test(mobile)==false){
        mobileId.innerHTML="手机号码不正确，请重新输入";
        return false;
        }
        mobileId.innerHTML="";
        return true;
    }

 

posted on 2019-05-04 22:34  漫思  阅读(13175)  评论(0)  编辑  收藏  举报

导航