今天的主要内容是登录和注册中可能会用到的内容,具体地说,课本中的程序是这样的要求:写一个注册界面,有用户名、密码、确认密码和个人简介,用户名不能为空,密码和确认密码要一致,个人简介不能超过60个字,而且违反以上规则三次会上锁,需要用户解锁才可以使用。
代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>注册</title>
</head>
<body>
<form method="post" action="">
<input type="hidden" name="" id="errnum" value=0/>
账户:<input type="text" name ="" id="userid"/><br /><br />
密码:<input type="password" name ="" id="passwd1"/><br /><br />
确认:<input type="password" name="" id="passwd2"/><br /><br />
简介:<textarea id="about" rows="4" cols="18"></textarea><br /><br />
<input type="submit" value="注册" id="regBut" οnclick="eg.regCheck();">
<input type="button" value="解锁" οnclick="eg.unlock()" id="unlock">
</form>
<script>
var eg={};//对象
eg.$=function(id){
//函数主体
return document.getElementById(id);
};
eg.regCheck=function(){
var id=eg.$("userid");
var p1=eg.$("passwd1");
var p2=eg.$("passwd2");
if(id.value==''){
alert('用户名不能为空!');
//计算错误次数
eg.err();
return false;
}
if(p1.value==''){
alert('密码不能为空!');
eg.err();
return false;
}
if(p1.value!=p2.value){
alert('两次输入的密码不同');
eg.err();
return false;
}
//获取textarea中的内容
var about=eg.$("about");
if(about.value.length>60){
alert('简介太长');
eg.err();
return false;
}
return true;
};
eg.err=function(){
var errnum=eg.$("errnum");
var old=errnum.value;
//将变量变为整型,并增加
errnum.value=parseInt(old)+1;
//判断是否要锁定
eg.lock();
};
eg.lock=function(){
var errnum=eg.$("errnum");
if(parseInt(errnum.value)>2){
//错三次就不能登录了
eg.$("regBut").disabled=true;
//显示锁定按钮
eg.$("unlock").style.display="block";
}
};
eg.unlock=function(){
//重新注册,登录可以使用
eg.$("regBut").disabled=false;
//解锁按钮失效
eg.$("unlock").style.display="none";
}
</script>
</body>
</html>
在这个过程中,我尝试理解一下几个概念:
(1)submit和button的区别:submit是button的一种,submit顾名思义是提交,所以这种类型可以将表单提交给服务器,而button只会执行定义与onclick中的函数内容,并没有自动提交表单给服务器的作用,除非在onclick中定义。百度知道中的内容说得比较清楚,几个回答都看看。
(2)button的display属性:这个属性决定按钮是否显示,为none则不可显示,为block则可以显示。
<input type="button" value="解锁" οnclick="eg.unlock()" style="display:none" id="unlock">
或者
eg.$("unlock").style.display="block";