黑马程序员技术交流社区
标题:
注册页面登录框的问题
[打印本页]
作者:
黄国钢
时间:
2012-4-4 02:02
标题:
注册页面登录框的问题
本帖最后由 黄国钢 于 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>
复制代码
作者:
黄雄斌
时间:
2012-4-4 08:46
我这里有一个能固定大小的登录框,你比较下,看能否有收获:
<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>
复制代码
作者:
何智杰
时间:
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