JavaScript关于登录和注册

最新推荐文章于 2024-06-05 16:53:17 发布

AjoyZhi

最新推荐文章于 2024-06-05 16:53:17 发布

阅读量4.2k

点赞数 5

分类专栏： JavaScript

本文链接：https://blog.csdn.net/AjoyZhi/article/details/78974804

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天开始了JavaScript学习的第二天，也只是对着课本敲了敲代码，但是我也在试着弄清楚里面很多问题，慢慢来吧。

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

AjoyZhi

关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JavaScript关于登录和注册

今天开始了JavaScript学习的第二天，也只是对着课本敲了敲代码，但是我也在试着弄清楚里面很多问题，慢慢来吧。今天的主要内容是登录和注册中可能会用到的内容，具体地说，课本中的程序是这样的要求：写一个注册界面，有用户名、密码、确认密码和个人简介，用户名不能为空，密码和确认密码要一致，个人简介不能超过60个字，而且违反以上规则三次会上锁，需要用户解锁才可以使用。
复制链接

扫一扫