黑马程序员技术交流社区

标题: 注册页面登录框的问题 [打印本页]

作者: 黄国钢    时间: 2012-4-4 02:02
标题: 注册页面登录框的问题
本帖最后由 黄国钢 于 2012-4-6 12:27 编辑

以下是登录界面的HTML代码,查看了很多资料才实现了智能提示错误信息。
但在输入错误时,提示跟着变化,登录界面也在相应的更改大小,怎么固定呢?

注册页面代码:
  1. <html>
  2. <head>
  3.     <title>注册界面</title>
  4.     <script type="text/javascript">
  5.     function CheckUser(){
  6.         var user = document.form1.username.value;
  7.         var span = document.getElementById("a1");
  8.         if(user==""){
  9.             span.innerHTML="姓名不能为空";
  10.         }else if(!user.match(/^[a-zA-Z_]{1}\w{4,}$/)){
  11.                 span.innerHTML="数字、字母、下划线、不少于5位,不得以数字开头";
  12.                
  13.         }else{
  14.             span.innerHTML="";
  15.             return true;
  16.         }
  17.         return false;        
  18.     }
  19.    
  20.     function CheckPassWord(){
  21.         var pass = document.form1.password.value;
  22.         var span = document .getElementById("a2");
  23.         if(pass==""){
  24.             span.innerHTML="密码不能为空";
  25.         }else if(pass.length<5){
  26.             span.innerHTML ="密码必须大于5位";
  27.         }else if(pass.length>16){
  28.             span.innerHTML = "密码不得大于16位";
  29.         }else if(!pass.match(/^[a-zA-Z0-9_]{4,16}$/)){
  30.             span.innerHTML ="必须是字母、数字、下划线、4-16位字符";
  31.            
  32.         }else{
  33.             span.innerHTML ="";
  34.             return true;
  35.         }
  36.         return false;
  37.     }
  38.    
  39.    
  40.     function CheckPassandpass(){
  41.         var pass = document.form1.password.value;
  42.         var rpass = document.form1.tpassword.value;
  43.         var span = document .getElementById("a3");
  44.         if(pass!=rpass){
  45.             span.innerHTML ="输入的密码不一致";
  46.         }
  47.         else{
  48.             span.innerHTML ="";
  49.             return true;
  50.         }
  51.         return false;
  52.     }
  53.    
  54.     function CheckMail(){
  55.         var mail = document.form1.emaladress.value;
  56.         var span = document.getElementById("a4");
  57.         if(!mail.match(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)){
  58.             span.innerHTML ="邮箱输入有误";
  59.         }else{
  60.              span.innerHTML ="";
  61.             return true;
  62.         }
  63.         return false;
  64.     }
  65.    
  66.     function CheckMatchMail(){
  67.         var mail = document.form1.emaladress.value;
  68.         var rmail = document.form1.temaladress.value;
  69.         var span = document.getElementById("a5");
  70.         if(mail!=rmail){
  71.             span.innerHTML ="邮箱输入不一致";
  72.         }else{
  73.             span.innerHTML ="";
  74.             return true;
  75.         }
  76.         return false;        
  77.     }
  78.    
  79.     function isSubmit(){
  80.         var v1 = CheckUser();
  81.         var v2 = CheckPassWord();
  82.         var v3 = CheckPassandpass();
  83.         var v4 = CheckMail();
  84.         var v5 = CheckMatchMail();
  85.         if(v1&&v2&&v3&&v4&&v5){
  86.             return true;
  87.         }
  88.         alert("填写表单有误,重新填写");
  89.         return false;
  90.     }

  91.     </script>
  92.     </head>
  93.     <body>
  94.     <form name="form1" action="javascript:alert('提交成功!');" onsubmit = "return isSubmit()">
  95.     <table border="0" width="700" cellpadding="5" cellspacing="1" align="center" bgcolor="#d0d0d0">
  96.     <tr bgcolor ="#c5e3fd"><td colspan="2"><b>必填信息</b></td></tr>
  97.     <tr bgcolor ="#f7f7f7"><td align="right"><label for="username">登录名:</label></td><td><input  id="username" type="text" onblur ="CheckUser()"/><font size="-3" color="red"><span id="a1">(只能用英文、字母、下划线)</span></font></td></tr>
  98.     <tr bgcolor ="#f7f7f7"><td align="right"><label for="password">密码:</label></td><td><input  id="password" type="password" onblur="CheckPassWord()"/><font size="-3" color="red"><span id="a2">(密码必须大于5位,区分大小写)</span></font></td></tr>
  99.     <tr bgcolor ="#f7f7f7"><td align="right"><label for="tpassword">确认密码:</label></td><td><input  id="tpassword" type="password" onblur="CheckPassandpass()"/><font size="-3"color="red"><span id="a3" ></span></font></td></tr>
  100.     <tr bgcolor ="#f7f7f7"><td align="right"><label for="emaladress">邮件地址:</label></td><td><input  id="emaladress" size="50" type="text" onblur ="CheckMail()"/><font size="-3" color="red"><span id="a4"></span></font></td></tr>
  101.     <tr bgcolor ="#f7f7f7"><td align="right"><label for="temaladress">确认邮件地址:</label></td><td><input  id="temaladress" size="50" type="text" onblur ="CheckMatchMail()"/><font size="-3" color="red"><span id="a5"></span></font></td></tr>
  102.     <tr bgcolor ="#f7f7f7" align="center"><td colspan="2"><input type="submit" value="提 交" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type = "reset" value ="重 填"/></td></tr>
  103. </table>
  104. </form>
  105. </body>
  106. </html>
复制代码

作者: 黄雄斌    时间: 2012-4-4 08:46
我这里有一个能固定大小的登录框,你比较下,看能否有收获:
  1. <table width=93% border=0 cellspacing=1 cellpadding=6 align=center bgcolor=#cccccc class=TBone>
  2.      <form action=User/login.asp method="post">
  3.      <tr bgcolor=eeeeee height=25 class=TBBG9>
  4.            <td height=20><table><tr><td>有效期: </td><td><Select name=CkiExp>
  5.                                          <option value="-1">无效
  6.                                          <option value="365">一年
  7.                                          <option value=1>一天
  8.                                          <option value=2>两天
  9.                                          <option value=7>一周
  10.                                          <option value=31>一月
  11.                                    </select>
  12.                        <input name=submitflag type=hidden value="ddddls-+++">
  13.                        </td><td>用户名: </td><td><input name=user type=text maxlength=20 size=10 value="" class=fminpt></td><td>
  14.                        密码: </td><td><input name=pass type=password maxlength=20 size=10 value="" class=fminpt>
  15.                        </td><td><input type=submit value="登录" class=fmbtn>
  16.                        </td><td>  [<a href=User/UserGetPass.asp>忘记密码了</a>]
  17.                         [<a href=User/UserJoin.asp>新用户注册</a>]
  18.                        </td></tr>
  19.      </form></table>
复制代码

作者: 何智杰    时间: 2012-4-6 08:44
标题: 2
对第一行(tr)的 两个td 分别增加class="td1"  class="td2"

然后在head中增加以下的样式表就可以固定

<style type="text/css">
.td1{ width:250px}
.td2{ width:445px}
</style>




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2