Javascript模拟登录验证——在应用中学Javascript（续）

Posted on 2006-11-15 20:17 风中聆听阅读(535) 评论(1) 编辑收藏所属分类: JavaScript

续上篇：Javascript模拟登录验证——在应用中学Javascript

新建一xml文档，编辑内容如下：

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>

<user>

<name>manager</name>

<page>manager.html</page>

</user>

<user>

<name>sales</name>

</user>

</dataset>

在这个文档里存储了用户名密码以及验证成功后该用户被转向的地址，我把这个xml文档命名为data.config，而没有用xml扩展名。

在对这个xml操作之前，我们有必要回顾一下一些dom的常用类。

Class Fields Methods

Node attributes NameNodeMap appendChild(Node newChild) Node

childNodes NodeList hasChildNodes boolean

firstChild Node insertBefore(Node newChild,Node refChild) Node

lastChild Node removeChild(Node oldChild) Node

nextSibling Node replaceChild(Node newChild,Node oldChild) Node

nodeName String 　　

nodeType Number 　　

nodeValue String 　　

parentElement Node 　　

parentNode Node 　　

previousSibling Node 　　

Element 　　 getElementByTagName(String name) NodeList

　　 removeAttribute(String name) void

　　 setAttribute(String name, String value) void

　　 getAttribute(String name) String

Document 　　 createElement(String tagName) Element

　　 createTextNode(String data) Test

　　 getElementByTagName(String name) NodeList

　　 getElementById(String elementId) Element

　　 selectSingleNode(XPath) Node

　　 selectNodes(Xpath) NodeList

有了这些知识，我们就可以把这个类简单地写为：

function User(name){

this.name = name;

}

User.prototype =

{

checkUser: function(password)

{

var xmlDoc = checkXMLDocObj('data.config');

var nodeList = xmlDoc.selectNodes("//name"); //look for the nodes named of "name"

for (var i=0; i < nodeList.length; i++)

{

var nameNode = nodeList.item(i);

if (nameNode.text == this.name)

{

var pwdNode = nameNode.nextSibling;

if (pwdNode.text == password)

{

return true;

}

alert('wrong password!');

return false;

getPage: function()

{

var xmlDoc = checkXMLDocObj('data.config');

var nodeList = xmlDoc.selectNodes("//name");

for (var i=0; i < nodeList.length; i++)

{

var nameNode = nodeList.item(i);

if (nameNode.text == this.name)

{

var pwdNode = nameNode.nextSibling;

var pageNode = pwdNode.nextSibling;

return pageNode.text;

}

alert('wrong direction!');

return false;

}

此处仅为简单应用而写的类，具体到更大的应用时可以再行修改。

接下来是页面的思路：在首页某个链接上点击，就弹出模态窗口让人输入密码验证，并把链接的内容（某个权限/页面）把存下来。输入密码提交后，就把这些交给javascript去xml文件中查找是否有权限（用user类），如果成功则跳转。

首页代码：

<html>

<head>

</head>

<p>Web Reports</p>

<img width=19 height=21 src=point.gif border=0 align=middle><a href="#" >Manager </a>

<img width=19 height=21 src=point.gif border=0 align=middle><a href="#" >Sales & Marketing</a>

<img width=19 height=21 src=point.gif align=middle><a href="#" >Outbound</a>

<img width=19 height=21 src=point.gif align=middle><a href="#" >Inbound</a>

<img width=19 height=21 src=point.gif align=middle><a href="#" >Accounting</a>

window.onload = function()

{

//add onclick event handler of each 'a' tag

var aTags = document.getElementsByTagName("A");

for (var i=0;i< aTags.length;i++)

{

aTags.item(i).onclick = linkOnclickHandler;

}

//show a dialog of login

function linkOnclickHandler()

{

var dept = document.getElementById("dept");

dept.value = getInsideText(event.srcElement).toLowerCase();

window.showModalDialog("login.html",window,"dialogHeight:300px;dialogWidth:320px;help:0;status:0;");

}

//it should be in the commonlib.js. -_-d

function getInsideText(element)

{

var children = element.childNodes;

for (var i=0; i<children.length; i++)

{

var child = children.item(i);

if (child.nodeType==3)

{

return child.nodeValue;

}

else

return getInsideText(child);

}

</script>

</body>

</html>

模态窗口调出的页面代码如下：

<html>

<head>

<title>

</title>

<style>

body{background-color:#efefef;}

#div1{width:300px;height:200px;background-color:#efefef;padding:60px 60px 60px 60px ;font-family:arial; font-size:12px;text-align:center;display:block;}

.input{ BACKGROUND-COLOR: #FBFEF5;height:20px;width:120px;}

.btn {BORDER-RIGHT: #cc6600 1px solid; BORDER-TOP: #cc6600 1px solid;BORDER-LEFT: #cc6600 1px solid; COLOR: #cc6600; BORDER-BOTTOM: #d97603 1px solid; HEIGHT: 16px; BACKGROUND-COLOR: #FBFEF5; font-size:12px;}

</style>

</head>

<body>

var checks = function(){

if (auth())

{

//alert("Login Successfully!");

// when login sucessfully, we usually use following sentence to redirect the page.

var objWin = window.dialogArguments;

var name = objWin.document.getElementById("dept").value;

//not using this following method because it may cause errors when the window has already been redirected.

//objWin.parent.mainFrame.window.location = getPage(user);

var user = new User(name);

var page = user.getPage();

objWin.open(page,"mainFrame");

window.close();

}

else

{

//alert("access is denied!");

var pwd = document.getElementById("pwd");

pwd.value = "";

pwd.focus();

}

var auth = function(){

var objWin = window.dialogArguments;

var name = objWin.document.getElementById("dept").value;

var password = document.getElementById("pwd").value;

var user = new User(name);

return user.checkUser(password);

}

var keyEvent = function(event,element){

NS4 = (document.layers) ? true : false;

var code = 0;

if (NS4)

code = event.which;

else

code = event.keyCode;

if (code==13)

{

if (element.name="pwd")

{

checks();

}