html静态网站登陆验证,静态页面js加密URL密码验证

随手写的一个静态HTML页面JS加密URL，密码验证的jQuery插件

点击查看演示

HTML部分：

• 密码为passcode的链接测试
• 密码为mm2的链接测试

增加mrel属性，写入真实页面地址前缀，如真实页面地址为shang_mmpage0.html ,mrel里的地址写为shang.html.

CSS部分(主要为密码验证框的样式)：

/* 密码框样式 */

.mm{cursor:pointer; position:relative;}

.passbox{position:relative; background:#f8f9fe; border:1px solid #e2e2e2; display:block; width:180px; height:80px; padding:10px 20px; z-index:999; border-radius:4px; font-size:12px;}

.passbox input{display:inline; width:120px; margin-top:10px; padding:3px 0px; background-color:transparent; border:1px solid #ccc;}

.passbox .btn{ display:inline-block; padding:0px 15px; height:25px; border:1px solid #ccc; background-color:#000; color:#fff; cursor:pointer; margin-top:3px; position:relative; top:-3px; border-radius:7px; }

.passbox .close{position:absolute; top:2px; right:10px; left:auto; cursor:pointer; font-family:Arial; color:#d92020; font-weight:bold; font-size:15px;}

.mpop{padding-left:5px; color:#ff0101;}

/* 密码框样式结束*/

JS部分：

(function($){

$.fn.jsPass=function(options){

var defaults={

passtag:".mm",

passcode:"passcode",

pagetagname:"_mmpage0.html"

};

var opts=$.extend(defaults,options);

var win_href=window.location.href;

var win_searchnum=win_href.lastIndexOf("/");

var win_path=win_href.substr(0,win_searchnum+1);

var mmcode=opts.passcode,ele=this.find(opts.passtag);

ele.each(function(i){

$(this).click(function(e){

var ele_url=$(this).attr("mrel");

var ele_sublength=ele_url.length-5;

var ele_href=win_path+ele_url.substr(0,ele_sublength)+opts.pagetagname;

var ele_passbox=$(".passbox");

if(ele_passbox.length==0){

var ele_parent=$(this).parent("li");

ele_parent.append("输入密码：确定X");

};

$(".passbox").find(".close").click(function(){

$(".passbox").detach();

});

$(".passbox").find(".btn").click(function(){

var input_val=$(".passbox").find("input").val();

if(input_val==mmcode){

$(".passbox").detach();

window.open(ele_href);

}else{

$(".passbox").find(".tip").html("密码错误！");;

}

});

});

});

}

})(jQuery)

使用方法：

$(function(){

$("body").jsPass();

$("body").jsPass({

passtag:".mm2", //加密码的元素可选(jQ选择器名)

passcode:"mm2", //密码(字符串)

pagetagname:"_page2.html" //加密码页面后缀

});

/*

以上参数都为可选，以下为默认的参数

passtag:".mm",

passcode:"passcode",

pagetagname:"_mmpage0.html" */

})

主要实现方式为页面内隐藏真实URL，由JS代码拼接后缀字符串组合为真实URL地址。通过密码验证成功打开真实URL地址。

最后将所有的JS代码加密压缩，达到静态页密码验证功能。

当然用JS来进行加密验证并不可能达到真正的加密，以上代码只作试验。