练习一html注册页面输入验证

效果

**
源代码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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表格js输入验证练习</title>
<style>
.errMsg{
      font-family:隶书;
      font-size:14px;
      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 pwdCheck(){
    var pwdstr = document.getElementById("firpwd").value;
    var reg = /^[a-z|A-Z]{1}[a-z|A-Z|0-9|_]{5,19}$/;
    //alert(reg.test(nameval));
    if(reg.test(pwdstr)){
       clearErr("firpwderr");
       return true;
    }else{
       document.getElementById("firpwderr").style.display="";
       document.getElementById("firpwderr").innerHTML = "*密码级别太低";
       document.getElementById("firpwd").value="";
       return false;
    }
     }

 function PwdCheck(){
    var pwdstr = document.getElementById("secpwd").value;
    var reg = /^[a-z|A-Z]{1}[a-z|A-Z|0-9|_]{5,19}$/;
    //alert(reg.test(nameval));
    if(reg.test(pwdstr)){

       clearErr("secpwderr");
       return true;
    }else{
       document.getElementById("secpwderr").style.display="";
       document.getElementById("secpwderr").innerHTML = "*密码级别太低";
       document.getElementById("secpwd").value="";
       return false;
    }
     }






function clearErr(eleId){
    document.getElementById(eleId).style.display="none";
}

function emailCheck(){
    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("emailerr");
        return true;
    }else{
       document.getElementById("emailerr").style.display="";
       document.getElementById("emailerr").innerHTML = "邮箱地址非法";
       return false;
    }
}

function sucess(){
    if(nameerr()&&emailCheck()){
        alert("恭喜你,注册成功!");
        document.form1.submit();
    }else{
        alert("注册失败!");
    }

}

</script>



</head>

<body background="images/test6.jpg" topmargin="50">
<form action="" method="post" name="form1" >
<table width="800" border="1" align="center" cellspacing="0" cellpadding="2" >
  <tr   >
    <td width="151"><label > 用户名:</label>&nbsp;</td>
    <td width="321" style="text-align:center">
    <input  type="text" id="username" size="40" 
    onblur="nameerr();" onfocus="clearErr('userNameCk');" />&nbsp;</td>
    <td width="306"  align="center"> <div id="userNameCk" class="errMsg"></div></td>
  </tr>
  <tr valign="middle"  >
    <td><label > 输入密码:</label>&nbsp;</td>
    <td style="text-align:center"><input type="text" id="firpwd"  size="40"  onblur="pwdCheck() " onfocus="clearErr('firpwderr');"  />  </td>
    <td style="text-align:center"> <div id="firpwderr" class="errMsg"></div></td>
  </tr>
  <tr valign="middle"   >
    <td><label >验证密码:</label>&nbsp;</td>
    <td style="text-align:center"><input type="text" id="secpwd"  size="40" onblur="PwdCheck() " onfocus="clearErr('secpwderr');" />&nbsp;</td>
    <td style="text-align:center"> <div id="secpwderr" class="errMsg"></div></td>
  </tr>
  <tr valign="middle"  >
    <td><label > 密码提示问题:</label>
      &nbsp;</td>
    <td style="text-align:center">&nbsp;
    <select name="questuion" size="1" >
     <option  id="q1"> 在你看来,最近热播剧中,哪一部是烂片?</option>
     <option  id="q1"> 我的生日是哪一天?</option>
     <option  id="q2"> 我叫什么名字?</option>
      <option  id="q2"> 我的媳妇叫什么名字?</option>
    </select>
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr valign="middle"  >
    <td><label > 密码提示答案:</label>
      &nbsp;</td>
    <td  valign="middle" style="text-align:center"><input  type="text" id="answer"  size="40"  height="15"/>&nbsp;</td>
    <td style="text-align:center"> <div id="userNameCk" class="errMsg"></div></td>
  </tr>
  <tr valign="middle"  >
    <td><label > 出生日期:</label>
      &nbsp;</td>
    <td style="text-align:center">
    <select name="select" size="1">
       <option value="1" selected="selected">1990</option>
       <option value="1">1991</option>
       <option value="1">1992</option>
       <option value="1">1993</option>
       <option value="1">1994</option>
       <option value="1">1995</option>
        </select>
      <select name="select" size="1">
          <option value="1" selected="selected">1月</option>
          <option value="1">2月</option>
          <option value="1">3月</option>
          <option value="1">4月</option>
          <option value="1">5月</option>
          <option value="1">6月</option>
          <option value="1">7月</option>
          <option value="1">8月</option>
          <option value="1">9月</option>
          <option value="1">10月</option>
          <option value="1">11月</option>
          <option value="1">12月</option>
          </select>
      <select name="select" size="1">
         <option value="1" selected="selected">1</option>
         <option value="1">2</option>
         <option value="1">3</option>
         <option value="1">4</option>
         <option value="1">5</option>
         <option value="1">6</option>
         <option value="1">7</option>
         <option value="1">8</option>
         <option value="1">9</option>
         <option value="1">10</option>
         </select>
    &nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr valign="middle"  >
    <td><label > 性别:</label>
      &nbsp;</td>
    <td style="text-align:center">
    <input type="radio" name="sex"    checked="checked"  vulue="男"/></input>

    <input type="radio" name="sex" value="女" /></input>
    &nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr valign="middle"  >
    <td><label > 常用邮箱:</label>
      &nbsp;</td>
    <td style="text-align:center">&nbsp;
   <input type="text" id="email"  size="40" onblur="emailCheck() " onfocus="clearErr('emailerr');"   />
    </td>
    <td  style="text-align:center">  <div id="emailerr" class="errMsg"></div></td>
  </tr>
  <tr valign="middle"   >
    <td><label > 请输入验证码:</label>
      &nbsp;&nbsp;</td>
    <td   style="text-align:center">&nbsp;<input type="text" id="firpwd"  size="20"/>&nbsp;
    <label> <font size="+2" face="隶书" color="#FF0000"><i>3375&nbsp;</i></font></label>
    <input type="button" id="clear" value="刷新" /></td>
    <td style="text-align:center">  <div id="userNameCk" class="errMsg"></div></td>
  </tr>
  <tr valign="middle"  >
    <td>&nbsp;</td>
    <td   style="text-align:center">&nbsp;
    <input  type="button" id="sub" name="sub" value="提交" 
     onclick="sucess()"
    />
    </td>
    <td>&nbsp;</td>
  </tr>
  <tr valign="middle"  height="15">
    <td></td>
    <td   style="text-align:center">
    </td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>




**
![jieguo 效果图::](https://img-blog.csdn.net/20150911164648885)


!运行效果:

发布了347 篇原创文章 · 获赞 15 · 访问量 6万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 终极编程指南 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览