JavaScript关于登录和注册

今天开始了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";

JavaScript关于登录和注册相关推荐

HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
原生JavaScript实现登录注册前端验证
原生JavaScript实现登录注册前端验证功能:实现一个简单的前端登录页面的验证, 废话不多说,直接上代码... 登录窗口代码段... //html <div class="log ...
登录和注册(struts2+hibernate+spring)
一:添加三框架jar包二:model层(student.java) Java代码 package com.wdpc.ss2h.model; public class Student { priv ...
基于springboot+thymeleaf+mybatis的员工管理系统 —— 登录与注册
员工管理系统 - 登录与注册功能创建项目 pom.xml 数据库表设计和环境准备建表SQL application.properties 用户注册与登录功能 entity dao service ...
尚硅谷谷粒学院学习笔记9--前台用户登录，注册，整合jwt，微信登录
用户登录业务单点登录(Single Sign On),简称SSO. 用户只需要登陆一次就可以访问所有相互信任的应用系统单点登录三种常见方式 session广播机制实现使用redis+cookie ...
node mysql实现登陆注册_使用 NodeJs 链接 mysql 的实现登录与注册
基础要求: 电脑安装NodeJs ,熟悉javascript语法 ; 会使用工具 wamp 废话不多说,开始正文; 创建一个文件夹用来操作下面步骤; 使用 npm 安装 mysql插件; 完成后创建j ...
SpringBoot Thymeleaf Vue Mybatis 登录和注册的实现，以及使用Cookie实现七天免登录
文章目录 5. 功能实现 5.1 用户注册和登录功能前端页面后台登录和注册 5.2 未登录拦截 5.3 七天内免登录 Cookie 和 Session Cookie简介 Cookie 的使用利用 ...
php+html+css制作非常好看网站登录与注册界面
php+html+css制作非常好看网站登录与注册界面 php版本:5.2.17 phpstudy版本:v8.0 首先看一下效果图: 登录界面: (输入密码也是一样的!) 注册页面: 以上就是效果图 ...
登录滑块验证表单_如何构建双滑块登录和注册表单
登录滑块验证表单 Some of you might already know but for those who don't, I'm starting a Weekly Coding Challe ...

JavaScript关于登录和注册

JavaScript关于登录和注册相关推荐

最新文章

热门文章