Code笔记之：注册页面验证码

Posted 2020-07-27 Alex_Blog

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Code笔记之：注册页面验证码相关的知识，希望对你有一定的参考价值。

文章内容包括：

1、验证码制作 -- 中文|字母|数字|……

2、图文验证码 -- 图片防盗链（php而非JS）

3、JS防止右键点击图片

4、input表单输入框不记录输入过的信息

5、CSS+div格式化页面布局

1、验证码制作

参考：http://www.imooc.com/video/2458

待续……

2、图片防盗链

【For Example】TP 框架中，在地址栏中可以直接访问类的成员函数，比如 http://localhost/Member/common/panduan

这里的panduan()是一个方法，写在 class CommonAction extends MCommonAction{} 类CommonAction控制器里面的，

成员函数 public function panduan(){ …… }就写在类控制器CommonAction里面，如果不想让外界直接访问该方法，

可以使用防盗链技术，即：

public function panduan(){

　　if(!$_SERVER[\'HTTP_REFERER\']){

　　　　echo "访问出错！";

　　}

…………

}

【技术讲解】防盗链技术使用了HTTP的Referer

3、JS防止右键点击图片

防止右键点击：鼠标右键点击图片时，不弹出右键菜单。

return false;
}

//为某个dom元素添加鼠标右击事件
window.onload = function(){
document.getElementById("div1").oncontextmenu=Youji;
}
window.onload = function(){
document.getElementById("vimg").oncontextmenu=Youji;
document.getElementById("div1").oncontextmenu=Youji;
}
/* 可能只执行一个window.onload()*/
</script>
<img src="/imgs/1.gif" id="vimg"/>
<div id="div1" >
</div>

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\window.onload()简介

windows.onload() 调用必须等到页面内包括图片的所有元素加载完毕后才能执行。

window.onload = Checkbox_Click. Checkbox_Click is a js function.

不能同时编写多个，如果有多个window.onload方法，只会执行一个

与$(document).ready区别：

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

$(document).ready()可以同时编写多个，并且都可以得到执行.
$(document).ready(function(){})可以简写成$(function(){});

\\\\\\\\\\\\\\\\\\\\\\\\\\Dom是什么//////////

参考：http://www.w3school.com.cn/htmldom/dom_nodes.asp

DOM就是html元素---即节点，所有HTML元素（节点）都可以被修改、删除等。

HTML DOM Node Tree

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

……

\\\\\\\\\\\\\\\\DOM概念介绍结束////////

PS：介绍点击小图显示成大图的JS效果

<title>点击显示大图的JS</title>
<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:3px solid #eeeeee;width:100px;height:75px;}
#enlarge_images{position:absolute;display:none;z-index:2;}
</style>
<div id="demo"><img src="/jscss/demoimg/wall7.jpg" border="0" alt=""/></div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
var ts = gg[i];
ts.onclick = function(event){
event = event || window.event;
ei.style.display = "block";
ei.innerHTML = \'<img src="\' + this.src + \'" />\';
ei.style.top = document.body.scrollTop + event.clientY + 10 + "px";
ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
}
ts.onmouseout = function(){
ei.innerHTML = "";
ei.style.display = "none";
}
}
</script>

4、input表单不记录输入过的信息

当我们在浏览器中输入表单信息的时候，往往input文本输入框会记录下之前提交表单的信息，以后每次只要双击 input文本输入框就会出现之前输入的文本，这样有时会觉得比较方便，但有时也会暴露用户的隐藏数据。

　　如果让input表单输入框不记录输入过的信息，方法如下：

其实很简单，只需要在input文本输入框中加一条autocomplete="off"属性即可，相关代码如下所示：

5、CSS+div

【style 样式属性】

行高：line-height

浮动：float

边框：border ，比如：border:1px solid #ccc; /*表示边框是灰色实线粗度1px*/

圆角边框：border-radius ，详见 www.kuqin.com/shuoit/20141014/342620.html

【html标签】

上标：<sup></sup>

【安全性防护】

通常在网站建设中，有不少网站会被恶意攻击，我们要有效的防止我们的网站受到这样的攻击，可以采取一些办法来解决，当然，这些办法对于高手来讲，也会变的容易。但是的确能防止一下恶意攻击者，可以通过禁止他们查看源代码来解决该问题。

【禁止页面的鼠标右键菜单-查看源代码】

$(document).ready(function(){

//为dom元素:img id="pV" 添加右击事件
window.onload =function(){ //pV
document.getElementById("pV").oncontextmenu=function(){ return false;};
window.oncontextmenu=function(){ return false;};　　//为所有dom元素（即整个页面）添加“禁止查看源代码”
}
});

【HTML页面中-如何隐藏js代码】

实际上，js代码是无法隐藏的，只能混淆或者加密，或者使用其他方法。

思路一：混淆或者加密
严格不能叫加密只是混淆替换了所有的变量名。

{弊端}脚本语言混淆只是可读性变差了。但是高手会用chrome或者ff的console去调试你的JS。所以，安全是相对来说的。

思路二：引用js文件

用引用方法引用js页面会看不到代码，可以做成JS文件，然后调用JS连接。
在JS文件目录做好权限设置，防止非法访问和下载。

{格式}

--------------------------------------------------------------

由于个人对技术知识的表达不是很专业，还望各位看官

多多见谅，多多评论，多多指导！

不吝赐教~(~_~)

首次撰写日期：2016-6-14 11:30:13