今天的主要内容是登录和注册中可能会用到的内容,具体地说,课本中的程序是这样的要求:写一个注册界面,有用户名、密码、确认密码和个人简介,用户名不能为空,密码和确认密码要一致,个人简介不能超过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";