JavaScript 注册登录页面的简单实现

九月的开学至今，将近一个月的时间来学习JavaScript，如今花了一个星期的课余时间做了一个网站的注册登录页面的简单实现，在此记录一番。

1.基础知识的汲取。

对于学习新的知识，本人喜欢以书籍的形式给我带来新的天地。在我看来，相对于视频教学来说，书籍总会有视频所没有讲述到的内容。但是视频来说相对于书籍会多一点讲述者个人的见解，这一点也是比较好的。但是独自阅读书籍的话，会给自己留下自我思考的过程，当遇到一个问题时，并没有视频中的讲述者直接解惑，需要独自来思考。我认为这一点十分可贵，也是我选择书籍而不是视频的主要目的。学习方法还是因人而异。

我最初接触的到是《JavaScript DOM 编程艺术》(第二版)，本书只是涉及到了有关JavaScript中的DOM用法，其他方面只是稍微提起而已。但是本书却给人一种循序渐进的感觉，在学习上没有什么大的难点，通过逐步的深入，让我对DOM有了比较深的理解。最重要的是，这本书对于DOM的使用，以及如何优化代码，如何能够写出稳定的代码有着较大的帮助。其中的平稳退化，渐进增强的代码理念，更是让人受益匪浅。



但是这本书的不足之处就是设计的方面太少，虽然对DOM讲述的比较不错，但是这是远远不够的，于是我又选择了去阅读《JavaScript 高级程序设计》，相对于编程艺术来讲，这本书毫无疑问的大大增加了有关JavaScript的很多内容，ECMAscript、DOM、BOM、表单、绘图等各方面都有所涉猎。但是这本书相对比较厚，知识点齐全，作为工具书也是可以的。



在阅读了这两本书之后，加上自己微不可及的html和css知识，就开始策划了这注册登录页面的实现。

2.html和css实现的整体页面的排版效果。

最美好的事的莫过于自己按照自己的思想来创作一个符合自己心意的作品。我基本上花了大半天的时间来构思我的整个注册登录页面需要如何设计，但是限于本人的审美有限，于是就按照自己的想法做了一个整体的布局。然后就开始漫长的代码书写过程，其中对于html的实现和css的排版，这方面知识对我来时十分匮乏，但是有着google和百度，我还是顺利的完成了页面的排版。效果如下：





这里的设计思路完全是按照个人意愿来做的，所以这种方式可能有所差异。但是大同小异而已。

代码在此不再累述，所有的代码都存放到了本人的github上：https://github.com/leafage666/register-login

2.关于构思javascript的代码。

注册的时候需要验证注册信息是否填写正确，在此我选择使用正则表达式的方法来确认格式输入正确。

但是仅此还不够，在此以用户名的代码解释思路逻辑。

function username() {
<span style="white-space:pre">	</span>var username = document.getElementById("username"); //得到账户的对象
<span style="white-space:pre">	</span>var usernameSpan = document.getElementById("usernameSpan"); //得到文本对象
<span style="white-space:pre">	</span>var pattern = /^[0-9a-zA-Z_]{6,16}$/;
<span style="white-space:pre">	</span>var userAgain = 0; //用来标记用户名是否存在，1为用户名不存在且输入正确
<span style="white-space:pre">	</span>username.onfocus = function() { //获得焦点时根据匹配成功与否修改span中的样式和内容
<span style="white-space:pre">		</span>if(!pattern.test(username.value)) { //如果获得焦点时输入不正确，重新调整样式
<span style="white-space:pre">			</span>spanValue(usernameSpan, "usernameSpan"); //修改提示语句
<span style="white-space:pre">			</span>changeFailingStyle(username, usernameSpan); //修改为匹配中并且失败的样式
<span style="white-space:pre">		</span>} else {//如果匹配成功但是用户名存在
<span style="white-space:pre">			</span>if(userAgain == 0) {
<span style="white-space:pre">				</span>spanValue(usernameSpan, "usernameAgain"); //修改提示语句
<span style="white-space:pre">				</span>changeFailingStyle(username, usernameSpan); //修改为匹配中并且失败的样式
<span style="white-space:pre">			</span>}
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>username.onkeyup = function() { //输入内容是判断根据输入的值修改span中的样式和内容,使用up不是down，因为down读取时候有出入
<span style="white-space:pre">		</span>if(pattern.test(username.value)) { //匹配成功的话
<span style="white-space:pre">			</span>changeSucceedStyle(username, usernameSpan); //修改为匹配成功的样式
<span style="white-space:pre">			</span>if(!checkUsername(username.value + "username")) {//如果用户名存在
<span style="white-space:pre">				</span>spanValue(usernameSpan, "usernameAgain"); //修改提示语句
<span style="white-space:pre">				</span>changeFailingStyle(username, usernameSpan); //修改为匹配中并且失败的样式
<span style="white-space:pre">				</span>userAgain = 0; //修改为0
<span style="white-space:pre">			</span>} else {
<span style="white-space:pre">				</span>userAgain = 1; //修改为1
<span style="white-space:pre">			</span>}
<span style="white-space:pre">		</span>} else { //匹配失败
<span style="white-space:pre">			</span>spanValue(usernameSpan, "usernameSpan"); //修改提示语句
<span style="white-space:pre">			</span>changeFailingStyle(username, usernameSpan);
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>username.onblur = function() { //失去焦点时根据匹配成功与否修改span中的样式和内容
<span style="white-space:pre">		</span>if(pattern.test(username.value) && userAgain) { //匹配成功的话
<span style="white-space:pre">			</span>changeSucceedStyle(username, usernameSpan); //修改为成功的样式
<span style="white-space:pre">			</span>usernamenum = 1;
<span style="white-space:pre">		</span>} else { //匹配失败
<span style="white-space:pre">			</span>changeFailedStyle(username, usernameSpan); //修改为失败的样式
<span style="white-space:pre">			</span>usernamenum = 0;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>}
}

在最初的时候得到了这个input的对象，然后又得到了input标签后面的span的对象，再编写正则表达式。毫无疑问input是用来查找确认用户输入的内容，span的用来提示用户如何输入以及输入是否正确的。

其中checkUsername函数用来检测用户名在cookie中是否存在，如果存在的话提示错误，代码如下。

function checkUsername(userName) {//传来的是key，不是value 如要查找：majialong 传来的是majialongusername
var cookie = unescape(document.cookie); //得到cookie
var cookieArray = cookie.split(";"); //以；分组得到一个数组
for(var i = 0; i < cookieArray.length; i++) { //步进值为4，直接跳转到uesername一项中
var value = cookieArray[i].split("=")[0]; //再次以=分组直接,得到此时的key，不能得到value，因为密码的值可能于此冲突
//alert(value);
if(userName == value) { //如果此时的值与用户输入的值相同返回0
return 0; //如果有存在的直接返回0
}
}
return 1; //如果不存在的话返回1
}

由于cookie中存放的时候，是利用key=value，的形式存放的，在这里检查的是key是否重复，（写入cookie的时候，由于考虑到需要用户注册，所以每个cookie的key不能重复，否则新的value对将上次的所覆盖，所以key的存放形式：“用户名username” 这样用户名每次不一样，所以存入的key每次不一样）。重复返回0，否则返回1。

说明：检查key而不是检查value的好处，key的所有内容均不重复，比如：注册一个用户名为“xiaoming”，密码为“123456”的存放到cookie时，xiaomingusername=xiaoming;xiaomingpassword=123456；  后面的手机号和邮箱也是如此，由于各项前加上了对应的用户名，所以每次的key必然不重复。读取cookie时，也只需传入用户名和想要得到的内容，比如想要得到xiaoming的密码，需要传入xiaoming 和 password 即可。如果检查的是value，那么需要分别找出username和passowrd所对应的内容，否则可能出现
当前注册用户名 和 上个用户的密码 相同 ，却提示用户名存在，所以如果根据value判断的话，会加大难度。

然后得奥input的对象，最先开始添加的是onfocus事件，这个事件在用户的鼠标点击这个input标签进行输入的时候会被触发，在最初的情况下用户名界面是这样的



无论是输入框还是后面的红色*号都标志着此时的这项内容是错误的输入方式，而onfocus事件的函数用来在用户点击这个输入框之后确认格式是否正确，后面会显示输入的要求，错误的格式效果如下：



onkeyup事件的函数用来确认用户此时输入的内容是否符合要求，刚开始输入错误的格式会成为如下的格式：



但是一旦输入正确的格式之后，输入框的颜色和后面的提示语句都回发生改变，效果如下。



而最后的onblur事件，则是在用户输入完成之后鼠标点击其他地方时，用来检测内容是否正确输入的，倘若输入正确的时候格式与上面的效果一样，但是输入错误的格式，效果会变成如下的样子：



也就是回到了最初的错误的样子。

代码依次解释：

var username = document.getElementById("username"); //得到账户的对象
var usernameSpan = document.getElementById("usernameSpan"); //得到文本对象
var pattern = /^[0-9a-zA-Z_]{6,16}$/;

得到各个所需的对象以及正则表达式的编写。

onfocus事件：

username.onfocus = function() { //获得焦点时根据匹配成功与否修改span中的样式和内容
if(!pattern.test(username.value)) { //如果获得焦点时输入不正确，重新调整样式
spanValue(usernameSpan, "usernameSpan"); //修改提示语句
changeFailingStyle(username, usernameSpan); //修改为匹配中并且失败的样式
}
}

onfocus事件，if语句判断此时的输入框的内容是否输入正确，如果错误的话则修改后边的提示语句，spanValue函数用来修改后面的提示语句，详细代码如下：

function spanValue(spanID, spanValue) { //匹配失败时，修改后面字的总和
<span style="white-space:pre">	</span>switch(spanValue) {
<span style="white-space:pre">		</span>case "usernameSpan":
<span style="white-space:pre">			</span>spanID.firstChild.nodeValue = "6-16位：英文.数字.下划线";
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>case "passwordSpan":
<span style="white-space:pre">			</span>spanID.firstChild.nodeValue = "6-16位：非空字符";
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>case "repasswordSpan":
<span style="white-space:pre">			</span>spanID.firstChild.nodeValue = "请确认密码";
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>case "repasswordSpan1":
<span style="white-space:pre">			</span>spanID.firstChild.nodeValue = "两次密码不一致";
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>case "mailboxSpan":
<span style="white-space:pre">			</span>spanID.firstChild.nodeValue = "x(5-18位)@x.com";
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>case "phoneSpan":
<span style="white-space:pre">			</span>spanID.firstChild.nodeValue = "号码格式不正确";
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>case "usernameAgain":
<span style="white-space:pre">			</span>spanID.firstChild.nodeValue = "用户名已存在！";
<span style="white-space:pre">	</span>}
}

而，changFailingStyle函数则是将此时的输入框和后面的提示语句修改为错误的格式，代码如下：

function changeSucceedStyle(nameID, spanID) { //如果输入成功的话，用来修改后面span的内容样式和输入框的颜色
spanID.firstChild.nodeValue = "*";
spanID.style.fontSize = "larger";
spanID.style.color = "green";
nameID.style.borderColor = "limegreen";
}

function changeFailedStyle(nameID, spanID) { //输入失败而且焦点不在该输入框时的样式
spanID.firstChild.nodeValue = "*"; //设置后面的字体颜色、格式、大小
spanID.style.fontSize = "larger";
spanID.style.color = "red";
nameID.style.borderColor = "red";
}

function changeFailingStyle(nameID, spanID) { //输入失败时但是焦点还在该输入框时的样式
spanID.style.fontSize = "small";
spanID.style.color = "red";
nameID.style.borderColor = "red";
}

那么，如果匹配成功是否需要修改格式呢？在这里是不需要的，因为这与后面的onblur事件有关。

onkeyup事件：

username.onkeyup = function() { //输入内容是判断根据输入的值修改span中的样式和内容,使用up不是down，因为down读取时候有出入
if(pattern.test(username.value)) { //匹配成功的话
changeSucceedStyle(username, usernameSpan); //修改为匹配成功的样式
} else { //匹配失败
spanValue(usernameSpan, "usernameSpan"); //修改提示语句
changeFailingStyle(username, usernameSpan);
}
}

依然用正则表达式来对输入的内容进行匹配，如果正确则修改为正确的样式，错误修改为错误的样式即可。

onblur事件：

username.onblur = function() { //失去焦点时根据匹配成功与否修改span中的样式和内容
if(pattern.test(username.value)) { //匹配成功的话
changeSucceedStyle(username, usernameSpan); //修改为成功的样式
usernamenum = 1;
} else { //匹配失败
changeFailedStyle(username, usernameSpan); //修改为失败的样式
usernamenum = 0;
}
}

在这里依然是，匹配正确的话修改为正确的样式，错误的话修改为错误的样式即可。

在这里解释一下为什么onfocus事件不需要输入正确的时候修改样式，因为onblur事件，也就是在鼠标点击其他地方的时候，如果输入正确则修改为正确的样式，那么下次再次点击的时候是不需要修改正确的样式的，只有错误的话采用修改即可。

下面的手机号码、邮箱的验证于此类似，但是密码的判断有所不同：

这里是密码的判断和重复密码的判断代码：

function password() {
var password = document.getElementById("password"); //得到密码的对象
var passwordSpan = document.getElementById("passwordSpan");
var pattern = /^\S{6,16}$/;
var repassword = document.getElementById("repassword");
password.onfocus = function() { //获得焦点时根据匹配成功与否修改span中的样式和内容
if(!pattern.test(password.value)) { //如果获得焦点时输入不正确，重新调整样式
spanValue(passwordSpan, "passwordSpan"); //修改提示语句
changeFailingStyle(password, passwordSpan);
}
}
password.onkeyup = function() { //输入内容是判断根据输入的值修改span中的样式和内容,使用up不是down，因为down读取时候有出入
if(pattern.test(password.value)) { //匹配成功
changeSucceedStyle(password, passwordSpan);
if(repassword.value != "") { //如果此时确认密码不为空，需要重新进行确认
repassword.onfocus();
}
} else { //匹配失败
spanValue(passwordSpan, "passwordSpan"); //修改提示语句
changeFailingStyle(password, passwordSpan);
if(repassword.value != "") {
repassword.onfocus();
}
}
}

password.onblur = function() { //失去焦点时根据匹配成功与否修改span中的样式和内容
if(repassword.value == "") {
if(pattern.test(password.value)) { //匹配成功
changeSucceedStyle(password, passwordSpan);
passwordnum = 1;
} else { //匹配失败
changeFailedStyle(password, passwordSpan);
passwordnum = 0;
}
} else {
if(password.value != repassword.value) {
repassword.onfocus();
repassword.style.borderColor = "red";
repasswordnum = 0;
}
}

}

}

function repassword() {
var password = document.getElementById("password");
var repassword = document.getElementById("repassword"); //得到确认密码的样式
var repasswordSpan = document.getElementById("repasswordSpan");

repassword.onfocus = function() {
if(!(password.value == repassword.value && password.value != "")) { //如果两次密码的值不相等，修改内容和样式
spanValue(repasswordSpan, "repasswordSpan"); //修改提示语句
changeFailingStyle(repassword, repasswordSpan);
} else { //理论上不需要，但是有可能修改完密码后 与 此时的确认密码不同   然后又修改成相同的时候又用
changeSucceedStyle(repassword, repasswordSpan);
}
}
repassword.onkeyup = function() {
if(password.value == repassword.value && password.value != "") { //如果两次密码的值相等，修改内容和样式
changeSucceedStyle(repassword, repasswordSpan);
} else {
spanValue(repasswordSpan, "repasswordSpan1");
changeFailingStyle(repassword, repasswordSpan);
}
}
repassword.onblur = function() {
if(password.value == repassword.value && password.value != "") { //如果两次密码的值相等，修改内容和样式
changeSucceedStyle(repassword, repasswordSpan);
repasswordnum = 1;
} else {
spanValue(repasswordSpan, "repasswordSpan");
changeFailedStyle(repassword, repasswordSpan);
repasswordnum = 0;
}
}
}

可以看出，密码的onfocus事件与账号的一样，但是onkeyup事件有所不同，后面多加了一个if语句来判断重复密码内容是否为空进而对重复密码的聚焦行为（也就是调用了onfocus事件），那是因为：如果我们先填写了密码的内容，再填写重复密码的内容，若两次密码一致则通过即可，不一致则提示修改。但是在密码一致以后，我们再返回来修密码的内容时，重复密码的内容却没有发生变化，但是此时修改过后的密码和上次的密码是不一样的，也就是此时修改过后的密码和重读密码不一致，为了防止这样的事情发生。我们只需在修改完密码之后判断重复密码的内容是否为空，如果不为空的话，调用重复密码的onfocus事件即可，那么就会在重复密码的onfocus事件里面再次判断两次密码是否一致，一致通过，不一致提示即可。

验证码的验证也有所不同：

function vercode() {
var vercode = document.getElementById("vercode");
var vercodeSpan = document.getElementById("vercodeSpan");
vercode.onfocus = function() {
if(vercode.value == "" || vercodeSpan.style.color == "red" || vercodeSpan.style.color == "") { //如果内容为空点击产生验证码
produceCode();//在firefox浏览器中 vercodestyle刚开始是空的！！！
} else { //其他情况下不产生验证码，只是对验证码对错进行验证
if(vercodeSpan.style.color == "red") { //如果验证码不正确，根据提示语句的颜色来确认是否正确
vercodeSpan.style.color = "red"; //单独设置样式
vercode.style.borderColor = "red";
}
}
}
vercode.onkeyup = function(s) {
var vercodeSpan = document.getElementById("vercodeSpan");
if(vercode.value == vercodeSpan.firstChild.nodeValue) { //如果验证码正确
changeSucceedStyle(vercode, vercodeSpan);
} else {
vercodeSpan.style.color = "red"; //单独设置样式
vercode.style.borderColor = "red";
}
if(s == 1) { //如果修改前是正确的
produceCode();
vercodeSpan.style.color = "red"; //单独设置样式
vercode.style.borderColor = "red";
}
}
vercode.onkeydown = function() { //修改前正确的话重新产生验证码
var k = window.event.keyCode; //得到键盘此时按下的值
if(vercodeSpan.style.color == "green" && k != 9) { //如果此时按下的是tab键的话 不调用此函数
vercode.onkeyup(1);
}

}
vercode.onblur = function() {
if(vercodeSpan.style.color == "green") {
changeSucceedStyle(vercode, vercodeSpan);
vercodenum = 1;
} else {
changeFailedStyle(vercode, vercodeSpan);
vercodenum = 0
}
}

function produceCode() { //产生验证码
var code = ""; //初始化一个字符串型的空验证码
for(var i = 0; i < 4; i++) { //循环四次
var num = Math.floor(Math.random() * 10);
code += num; //产生一个数字加到验证码上
}
vercodeSpan.firstChild.nodeValue = code; //设置span为验证码
}
}

大部分内容与上面的介绍一致，多出的produceCode函数也是用来随机产生四位数字验证码而已。

需要介绍的什么情况下需要产生验证码：

首先改变的是判断的条件，在这里根据提示语句的颜色进行判断，因为我的思路是如果输入正确，则让颜色改变为绿色，错误的话变成红色。

所以如果最初的时候验证码的输入框为空或者每次点击的时候颜色为红色的时候也就是输入不正确的时候（但是在firefox浏览器中最初的颜色为空，所以多了个判断条件）产生验证码。

还有一种情况会产生验证码，就是在输入正确之后。再次修改输入导致验证码错误的情况下也会产生验证码。也就是多了个keydown事件，在输入之前，颜色为绿色代表着此时的验证码输入正确，但是又继续输入内容了，此时调用onkeyup事件的函数，并传入参数1，调用里面的if语句再次产生验证码。

注意：window.event.keyCode用来得到键盘输入的内容，值为9的话代表输入的是tab键，因为考虑到大多数人习惯用tab换行。所以在输入正确的验证码之后，如果按下的是tab键则不会当做错误的情况重新产生验证码。

验证的内容就是这样的，基本上一致。

函数里面的usernamenum等，是用来确认所有的内容都输入正确的。

如果所有的内容输入正确，点击注册按钮的话，会将用户的信息保存到cookie中。

代码如下：

function submit() { //对提交按钮进行设置
<span style="white-space:pre">	</span>var submit = document.getElementById("submit");
<span style="white-space:pre">	</span>var username = document.getElementById("username");
<span style="white-space:pre">	</span>var password = document.getElementById("password");
<span style="white-space:pre">	</span>var repassword = document.getElementById("repassword");
<span style="white-space:pre">	</span>var mailbox = document.getElementById("mailbox");
<span style="white-space:pre">	</span>var phone = document.getElementById("phone");
<span style="white-space:pre">	</span>var vercode = document.getElementById("vercode");
<span style="white-space:pre">	</span>submit.onclick = function() {
<span style="white-space:pre">		</span>if(usernamenum && passwordnum && repasswordnum && mailboxnum && phonenum && vercodenum) { //如果各项内容都填写正确，写入cookie
<span style="white-space:pre">			</span>var date = new Date(); //新建一个时间类
<span style="white-space:pre">			</span>date.setDate(date.getDate() + 30); //设置时间 为 当前日期加上30天
<span style="white-space:pre">			</span>var tempCookie = "";
<span style="white-space:pre">			</span>var cookie1 = unescape(document.cookie);//得到cookie的值
<span style="white-space:pre">			</span>var cookieArray = cookie1.split(";");
<span style="white-space:pre">			</span>if(cookieArray.length%4==2 || cookieArray.length%4==3) {
<span style="white-space:pre">				</span>if(cookieArray.length%4==2) {
<span style="white-space:pre">					</span>for(var i=0;i<cookieArray.length-1;i++) {
<span style="white-space:pre">						</span>if(cookieArray[i] != "") {//字符串不为空
<span style="white-space:pre">							</span>tempCookie += cookieArray[i];
<span style="white-space:pre">							</span>tempCookie += ";";
<span style="white-space:pre">						</span>}
<span style="white-space:pre">					</span>}
<span style="white-space:pre">				</span>}
<span style="white-space:pre">				</span>if(cookieArray.length%4==3) {
<span style="white-space:pre">					</span>for(var i=0;i<cookieArray.length-2;i++) {
<span style="white-space:pre">						</span>if(cookieArray[i] != "") {//字符串不为空
<span style="white-space:pre">							</span>tempCookie += cookieArray[i];
<span style="white-space:pre">							</span>tempCookie += ";";
<span style="white-space:pre">						</span>}<span style="white-space:pre">	</span>
<span style="white-space:pre">					</span>}
<span style="white-space:pre">				</span>}
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>//var tempCookie = unescape(document.cookie);//先将cookie保留下来
<span style="white-space:pre">			</span>document.cookie = "";//将cookie设为空的
<span style="white-space:pre">			</span>cookie = username.value + "username" + "=" + username.value + ";" + username.value + "password" + "=" + password.value + ";" + username.value + "mailbox" + "=" + mailbox.value + ";" + username.value + "phone" + "=" + phone.value + ";" + tempCookie;
<span style="white-space:pre">			</span>document.cookie = escape(cookie);
<span style="white-space:pre">			</span>//将新的内容写入带最前面，
<span style="white-space:pre">			</span>//不编码的话只会长时间保存第一个内容
<span style="white-space:pre">			</span>document.cookie = document.cookie + ";expires=" + date.toGMTString(); //加上保存的时间
<span style="white-space:pre">			</span>alert("注册完成！");
<span style="white-space:pre">			</span>return false;//取消浏览器默认刷新行为
<span style="white-space:pre">		</span>} else { //否则对填写错误的那项进行聚焦，来提示错误
<span style="white-space:pre">			</span>if(!usernamenum) {
<span style="white-space:pre">				</span>username.onfocus();
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>if(!passwordnum) {
<span style="white-space:pre">				</span>password.onfocus();
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>if(!repasswordnum) {
<span style="white-space:pre">				</span>repassword.onfocus();
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>if(!mailboxnum) {
<span style="white-space:pre">				</span>mailbox.onfocus();
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>if(!phonenum) {
<span style="white-space:pre">				</span>phone.onfocus();
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>if(!vercodenum) {
<span style="white-space:pre">				</span>vercode.onfocus();
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>alert("请确认信息填写正确！");
<span style="white-space:pre">			</span>return false;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>}
}

都正确的话，写入cooki。错误的话，根据错误的内容进行提示即可。

这里需要先利用循环将cookie中的内容，依次保存下来，然后将新的内容放到cookie中的最前方，是因为登录的时候需要用一个ID的值来区别是游客登录还是用户登录，而当ID出现在cookie最后时，不知道为何不能再继续写入新的cookie，所以利用循环将新的cookie存入到最前方，来保证ID在最后面。

而登录界面的验证与注册界面一致。

登陆的时候首先会从cookie读取用户的信息，当账号密码都输入正确的时候通过验证，进入主界面，否则提示错误信息。

得到cookie的代码如下：

function getCookie(username) {//传来的是key，返回的是对应的value
<span style="white-space:pre">	</span>var cookie = unescape(document.cookie); //得到解码后的cookie
<span style="white-space:pre">	</span>var cookieArray = cookie.split(";"); //第一次分组
<span style="white-space:pre">	</span>for(var i = 0; i < cookieArray.length; i++) { //循环分组里面的内容
<span style="white-space:pre">		</span>var value = cookieArray[i].split("="); //第二次分组
<span style="white-space:pre">		</span>if(value[0] == username) { //如果匹配到所要求而的内容
<span style="white-space:pre">			</span>return value[1]; //返回值
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span>}
}

根据需要传入相对的字符串即可。

主界面的代码我使用的javascript来动态生成的，如果是游客登陆的话效果如下：



用户登录的话，显示不同的信息而已：



至于如何动态产生html标签，产生用户界面的代码如下：

function visitor() {
var div3 = document.createElement("div"); //新建一个div元素节点
div3.setAttribute("id", "myDiv3"); //设置该div节点id属性为myDiv2
document.body.appendChild(div3); //将该div插入到body里面

var title = document.createElement("h1"); //新建标题的h1元素节点
title.setAttribute("id", "title"); //设置id
var title_text = document.createTextNode("《鹊踏枝》"); //新建一个文本节点
title.appendChild(title_text); //将该文本节点插入到h1元素节点中
div3.appendChild(title); //将该元素节点插入到div里面

var content = document.createElement("h1"); //创建内容标点
content.setAttribute("id", "content"); //设置id属性
var content_text1 = document.createTextNode("六曲阑干偎碧树，杨柳风轻，展尽黄金缕。");
var content_text2 = document.createTextNode("谁把钿筝移玉柱？穿帘海燕惊飞去。");
var content_text3 = document.createTextNode("满眼游丝兼落絮，红杏开时，一霎清明雨。");
var content_text4 = document.createTextNode("浓睡觉来慵不语，惊残好梦无寻处？"); //添加内容
content.appendChild(content_text1);
var br1 = document.createElement("br"); //新建两个换行符
var br2 = document.createElement("br");
content.appendChild(br1);
content.appendChild(br2);
content.appendChild(content_text2);
var br3 = document.createElement("br");
var br4 = document.createElement("br");
content.appendChild(br3);
content.appendChild(br4);
content.appendChild(content_text3);
var br5 = document.createElement("br");
var br6 = document.createElement("br");
content.appendChild(br5);
content.appendChild(br6);
content.appendChild(content_text4);
div3.appendChild(content); //加入到div元素中
}

注意：事先需要写好css代码，当然如果用javascript代码设置样式也可以。

一切代码都放在了github中：https://github.com/leafage666/register-login

也可以直接下载资源，需要两个积分点：http://download.csdn.net/detail/leafage_m/9713573

Just Do It！