注册页面登录框的问题

宋天琪

本帖最后由黄国钢于 2012-4-6 12:27 编辑

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

注册页面代码：

<html>
<head>
<title>注册界面</title>
<script type="text/javascript">
function CheckUser(){
var user = document.form1.username.value;
var span = document.getElementById("a1");
if(user==""){
span.innerHTML="姓名不能为空";
}else if(!user.match(/^[a-zA-Z_]{1}\w{4,}$/)){
span.innerHTML="数字、字母、下划线、不少于5位，不得以数字开头";
}else{
span.innerHTML="";
return true;
}
return false;
}
function CheckPassWord(){
var pass = document.form1.password.value;
var span = document .getElementById("a2");
if(pass==""){
span.innerHTML="密码不能为空";
}else if(pass.length<5){
span.innerHTML ="密码必须大于5位";
}else if(pass.length>16){
span.innerHTML = "密码不得大于16位";
}else if(!pass.match(/^[a-zA-Z0-9_]{4,16}$/)){
span.innerHTML ="必须是字母、数字、下划线、4-16位字符";
}else{
span.innerHTML ="";
return true;
}
return false;
}
function CheckPassandpass(){
var pass = document.form1.password.value;
var rpass = document.form1.tpassword.value;
var span = document .getElementById("a3");
if(pass!=rpass){
span.innerHTML ="输入的密码不一致";
}
else{
span.innerHTML ="";
return true;
}
return false;
}
function CheckMail(){
var mail = document.form1.emaladress.value;
var span = document.getElementById("a4");
if(!mail.match(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/)){
span.innerHTML ="邮箱输入有误";
}else{
span.innerHTML ="";
return true;
}
return false;
}
function CheckMatchMail(){
var mail = document.form1.emaladress.value;
var rmail = document.form1.temaladress.value;
var span = document.getElementById("a5");
if(mail!=rmail){
span.innerHTML ="邮箱输入不一致";
}else{
span.innerHTML ="";
return true;
}
return false;
}
function isSubmit(){
var v1 = CheckUser();
var v2 = CheckPassWord();
var v3 = CheckPassandpass();
var v4 = CheckMail();
var v5 = CheckMatchMail();
if(v1&&v2&&v3&&v4&&v5){
return true;
}
alert("填写表单有误，重新填写");
return false;
}
</script>
</head>
<body>
<form name="form1" action="javascript:alert('提交成功！');" onsubmit = "return isSubmit()">
<table border="0" width="700" cellpadding="5" cellspacing="1" align="center" bgcolor="#d0d0d0">
<tr bgcolor ="#c5e3fd"><td colspan="2"><b>必填信息</b></td></tr>
<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>
<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>
<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>
<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>
<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>
<tr bgcolor ="#f7f7f7" align="center"><td colspan="2"><input type="submit" value="提交" />      <input type = "reset" value ="重填"/></td></tr>
</table>
</form>
</body>
</html>

复制代码

黄雄斌 · 黄雄斌

我这里有一个能固定大小的登录框，你比较下，看能否有收获：

<table width=93% border=0 cellspacing=1 cellpadding=6 align=center bgcolor=#cccccc class=TBone>
<form action=User/login.asp method="post">
<tr bgcolor=eeeeee height=25 class=TBBG9>
<td height=20><table><tr><td>有效期: </td><td><Select name=CkiExp>
<option value="-1">无效
<option value="365">一年
<option value=1>一天
<option value=2>两天
<option value=7>一周
<option value=31>一月
</select>
<input name=submitflag type=hidden value="ddddls-+++">
</td><td>用户名: </td><td><input name=user type=text maxlength=20 size=10 value="" class=fminpt></td><td>
密码: </td><td><input name=pass type=password maxlength=20 size=10 value="" class=fminpt>
</td><td><input type=submit value="登录" class=fmbtn>
</td><td> [<a href=User/UserGetPass.asp>忘记密码了</a>]
[<a href=User/UserJoin.asp>新用户注册</a>]
</td></tr>
</form></table>

复制代码

何智杰 · 何智杰

对第一行(tr)的两个td 分别增加class="td1" class="td2"

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

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

帐号		自动登录	找回密码
密码			加入黑马

注册页面登录框的问题

评分

2 个回复

评分

2

评分