关于JavaScript登录和注册的小练习

最新推荐文章于 2021-07-30 04:04:59 发布

AjoyZhi

最新推荐文章于 2021-07-30 04:04:59 发布

阅读量519

点赞数

分类专栏： JavaScript

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

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天学习的知识点：

（1）submit和button，以及其display和disabled属性。

（2）JavaScript中的变量，尤其是hidden变量的使用。

（3）函数定义。

为了练习以上内容，自己写了一个登录，一个注册。

<!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>Comet注册</title>
 </head>
 <body>
  <form method="post" action="" οnsubmit="eg.submit();">
	用户名：<input type="text" name="" id="userName" /><br /><br />
	密码：<input type="password" name="" id="password1" /><br /><br />
	确认：<input type="password" name="" id="password2" /><br /><br />
	邮箱：<input type="text" name="" id="email"/><br /><br />
	手机号：<input type="text" name="" id="phoneNum"/><br /><br />
	<input type="submit" name="" id="regBtm" value="注册">
  </form>
  <script>
  //定义一个对象
  var eg={};
  //获取各个组件
  eg.$=function(id){
	  return document.getElementById(id);
  }
  //写提交函数
  eg.submit=function(){
	  var userName=eg.$("userName");
	  var passwd1=eg.$("password1");
	  var passwd2=eg.$("password2");
	  var email=eg.$("email");
	  var phone=eg.$("phoneNum");
	  if(userName.value==''){
		  alert('用户名不能为空');
		  return false;
	  }
	  if(passwd1.value=='' || passwd2.value==''){
		  alert('密码不能为空');
		  return false;
	  }
	  if(passwd1.value!=passwd2.value){
		  alert('两次密码不同');
		  return false;
	  }
	  if(email.value==''){
		  alert('请输入邮箱');
		  return false;
	  }
	  if(phone.value.length!=11){
		  alert('请输入完整的手机号');
		  return false;
	  }
	  return true;
  }
  </script>
 </body>
</html>

<!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="text" id="userName"/><br /><br />
	密  码：<input  type="password" id="passwd"/><br /><br />
	<input type="button" value="登录" id="btnlog" οnclick="eg.login();"/>
	<input type="button" value="忘记密码" id="btnforget"  style="display:none" οnclick="eg.forget();"/>
	<input type="hidden" value=0 id="errnum"/>
  </form>
  <script type="text/javascript">
  <!--
  //登录功能
  //用户名和密码不匹配三次及以上，则可以按忘记密码按钮，否则不可以按
  //登录会出现登陆成功
  //-->
  //首先定义一个对象
  var eg={};
  //获取各个组件,此处的id为一个字符串
  eg.$=function(id){
	  return document.getElementById(id);
  };
  eg.login=function(){
	  var userName=eg.$("userName");
	  var password=eg.$("passwd");
	  //暂时只能判断用户名和密码是否为空
	  if(userName.value==''){
		  alert('用户名不能为空！');
		  //出现错误情况，增加一次错误次数
		  eg.errCount();
	  }else {
		   if(password.value==''){
		         alert('密码不能为空！');
		         eg.errCount();
	        }else{
				 alert('登录成功');
			}
	  }
  };
  //增加错误记录次数
  eg.errCount=function(){
	  var err=eg.$("errnum");
	  var old=err.value;
	  err.value=parseInt(old)+1;
	  //如果错误次数为三以及上，则忘记密码的按钮可以使用，登录按钮不能使用
	  if(parseInt(err.value)>2){
		  var login=eg.$("btnlog");
		  login.disabled=true;
		  var forget=eg.$("btnforget");
		  forget.style.display="block";
	  }
  };
  //登录密码可以使用，而且将记录错误数的变量清0
  eg.forget=function(){
	  var login=eg.$("btnlog");
	  login.disabled=false;
	  var err=eg.$("errnum");
	  err.value=0;
  };
  </script>
 </body>
</html>

发现的问题，可能都是些微不足道的问题，但确实是困扰了我一阵，还有些小说明。

（1）

 //获取各个组件,此处的id为一个字符串
  eg.$=function(id){
	  return document.getElementById(id);
  };

所以在使用时，应为：

 var userName=eg.$("userName");

而不是：

 var userName=eg.$(userName);

这样会报“userName没有定义”的错误。

（2）

 if(userName.value==''){
		  alert('用户名不能为空！');
		  //出现错误情况，增加一次错误次数
		  eg.errCount();
	  }

取某变量的值，应为以上形式，而非：

if(userName==''){
		  alert('用户名不能为空！');
		  //出现错误情况，增加一次错误次数
		  eg.errCount();
	  }

这样不会报错，但是不会执行该部分代码。

（3）全局变量有多种定义形式：

var + 变量名：但需要放在各种函数之外，才为全局变量。

变量名：放在函数内外均可，在赋值后变为全局变量。

window.变量名。

这篇文章写得很清楚。

AjoyZhi

关注

0
点赞
踩
0

收藏

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

今天学习的知识点：（1）submit和button，以及其display和disabled属性。（2）JavaScript中的变量，尤其是hidden变量的使用。（3）函数定义。为了练习以上内容，自己写了一个登录，一个注册。注册：有用户名、密码、确认密码、邮箱和手机号，前四个项目均不为空，且密码和确认密码要一致，会判断手机号的长度，必须为11位。
复制链接

扫一扫