好易阁|免费杀毒软件|Web技术 » WEB前端应用

10 款网页设计师必知的免费 Android 应用

好易阁 — Fri, 20 Aug 2010 11:00:00 +0000

近几年苹果的 iPhone 一直占据主导地位，Google Android 系统貌似一直受它的阴影所茏罩。然而，这仅仅是因为 iPhone 发布时间比 Android 手机要早。不过，Android 越来越受欢迎（增长速度相当惊人），应用程序数量也上了一个台阶. 现在为大家介绍 10 款网页设计师必需知道的 Android 应用，以方便他们在找不到电脑的情况下进行生产，当然特指使用 Android 手机的网页设计师。
1.AndFTP

是否需要在 Android 手机上访问您的 WEB 服务器呢？AndFTP 是一款 JAVA 应用程序，可通过手机连接 web 服务器。支持 FTP, SFTP 及 FTPS。使用 AndFTP 可上传及下载文件，支持重命名、删除、创建文件/文件夹等命令，界面友好，易于操作。该应用免费。

2. SilverEdit

一款轻量级的源代码编辑程序，它能编写 HTML, CSS, PHP 文件并保存到手机或发送到您的邮箱帐户。配合上文提及的 AndFTP，您可以使用 Android 手机建立并上传网站！目前在某些 Android 手机上仍然有一些问题，不过一直在修复（开发中的 3 版比较稳定）。

3. Photoshop

Adobe 把日益流行的 Photoshop 带到了 Android 平台。但不幸的是，我们可以预料到，和台式机相比，它具有有限的功能。不过包含了基本的图像处理功能，如裁剪、旋转、调整颜色等。并且用户可使用免费的 photoshop.com 帐户上传和分享照片。

4. View Web Source

如果你正在浏览一个移动网站，想学习该网站的一些内容，View Web Source 能查看并下载该网站的源代码到它的文本编辑器。同时支持编辑和操作代码，评论并保存到您的手机（或发送到您的 email 帐户）。

5. Mobile GA

最靠谱的统计分析 —— Google Analytics 发有 Android 应用了。 Google Analytics 是最好的网站免费统计分析服务。Mobile GA (Google Analytics) 使用无需通过第三方，直接使用 Google Analytics API 传递数据，以维护您的隐私及数据安全。

6. Dropbox
一款适用于网页设计师及其他创作者的流行应用， Dropbox 是基于云的文件备份工具，可以让你使用 Android 手机访问存储在 Dropbox 的远程文件夹。只需要在一台电脑上保存了文件，就能在其他电脑或手机上远程访问。该应用可访问您的 Dropbox 帐户。需要在多台电脑或设备上共享文件或文档的话，该应用是相当方便的。

7. WordPress Mobile
如果您的博客使用 WordPress 架设的话，通过该应用可以发布新文章、编辑内容、管理评论等。该应用开源而且免费。

8. Thinking Space

作为一个网页设计者，你不能丢失创造力，而且不论身处何地你总是酝酿站点设计创意。 Thinking Space 是一款记录你想法的 Android 程序。它能上传你的数据到 Google App Engine。

9. Typography Junkies

每一个设计师都有一个好的排版灵感，网页排版在设计中也显得异常重要。使用 Typography Junkies for Android 应用，你能能过视频、图片、社会化媒体等获取最新的字体新闻。

10. HTML Test

需要复习 HTML 功课么？HTML Test 是一款优秀的 Android 应用，可以让您轻松的复习 HTML。该应用以选择题的形式测试您的 HTML 知识，当然您需要在规定时间内做完。

100+ javascript技巧集合

好易阁 — Tue, 02 Mar 2010 05:33:42 +0000

每一项都是js中的小技巧，但十分的实用！
1.document.write(”"); 输出语句
2.JS中的注释为//
3.传统的HTML文档顺序是:document->html->(head,body)
4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document)
5.得到表单中元素的名称和值:document.getElementById(”表单中元素的ID号”).name(或value)
6.一个小写转大写的JS: document.getElementById(”output”).value = document.getElementById(”i

nput”).value.toUpperCase();
7.JS中的值类型:String,Number,Boolean,Null,Object,Function
8.JS中的字符型转换成数值型:parseInt(),parseFloat()
9.JS中的数字转换成字符型:(”"+变量)
10.JS中的取字符串长度是:(length)
11.JS中的字符与字符相连接使用+号.
12.JS中的比较操作符有:==等于,!=不等于,>,>=,<.<=
13.JS中声明变量使用:var来进行声明
14.JS中的判断语句结构:if(condition){}else{}
15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop}
16.循环中止的命令是:break
17.JS中的函数定义:function functionName([parameter],…)
18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.
19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self
20.状态栏的设置:window.status=”字符”;
21.弹出提示信息:window.alert(”字符”);
22.弹出确认框:window.confirm();
23.弹出输入提示框:window.prompt();
24.指定当前显示链接的位置:window.location.href=”URL”
25.取出窗体中的所有表单的数量:document.forms.length
26.关闭文档的输出流:document.close();
27.字符串追加连接符:+=
28.创建一个文档元素:document.createElement(),document.createTextNode()
29.得到元素的方法:document.getElementById()
30.设置表单中所有文本型的成员的值为空:
var form = window.document.forms[0]
for (var i = 0; i if (form.elements.type == “text”){
form.elements.value = “”;
}
}
31.复选按钮在JS中判断是否选中:document.forms[0].checkThis.checked (checked属性代表为是否选中
返回TRUE或FALSE)
32.单选按钮组(单选按钮的名称必须相同):取单选按钮组的长度document.forms[0].groupName.length
33.单选按钮组判断是否被选中也是用checked.
34.下拉列表框的值:document.forms[0].selectName.options[n].value (n有时用下拉列表框名称加上.sel
ectedIndex来确定被选中的值)
35.字符串的定义:var myString = new String(”This is lightsword”);
36.字符串转成大写:string.toUpperCase(); 字符串转成小写:string.toLowerCase();
37.返回字符串2在字符串1中出现的位置:String1.indexOf(”String2″)!=-1则说明没找到.
38.取字符串中指定位置的一个字符:StringA.charAt(9);
39.取出字符串中指定起点和终点的子字符串:stringA.substring(2,6);
40.数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最
在值,Math.pow(value1,10)返回value1的十次方,Math.round(value1)四舍五入函数,Math.floor(Math.ra
ndom()*(n+1))返回随机数
41.定义日期型变量:var today = new Date();
42.日期函数列表:dateObj.getTime()得到时间,dateObj.getYear()得到年份,dateObj.getFullYear()得到
四位的年份,dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期几,dat
eObj.getHours()得到小时,dateObj.getMinutes()得到分,dateObj.getSeconds()得到秒,dateObj.setTi
me(value)设置时间,dateObj.setYear(val)设置年,dateObj.setMonth(val)设置月,dateObj.setDate(va
l)设置日,dateObj.setDay(val)设置星期几,dateObj.setHours设置小时,dateObj.setMinutes(val)设置分,
dateObj.setSeconds(val)设置秒 [注意:此日期时间从0开始计]
43.FRAME的表示方式: [window.]frames[n].ObjFuncVarName,frames["frameName"].ObjFuncVarN
ame,frameName.ObjFuncVarName
44.parent代表父亲对象,top代表最顶端对象
45.打开子窗口的父窗口为:opener
46.表示当前所属的位置:this
47.当在超链接中调用JS函数时用:(javascript 来开头后面加函数名
48.在老的浏览器中不执行此JS:
49.引用一个文件式的JS:
50.指定在不支持脚本的浏览器显示的HTML:
51.当超链和onCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例:dfsadf
52.JS的内建对象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number,Object,RangeError,
ReferenceError,RegExp,String,SyntaxError,TypeError,URIError
53.JS中的换行:\n
54.窗口全屏大小:
55.JS中的all代表其下层的全部元素
56.JS中的焦点顺序:document.getElementByid(”表单元素”).tabIndex = 1
57.innerHTML的值是表单元素的值:如
“how are you”

,则innerHTML的值就是:how are you
58.innerTEXT的值和上面的一样,只不过不会把这种标记显示出来.
59.contentEditable可设置元素是否可被修改,isContentEditable返回是否可修改的状态.
60.isDisabled判断是否为禁止状态.disabled设置禁止状态
61.length取得长度,返回整型数值
62.addBehavior()是一种JS调用的外部函数文件其扩展名为.htc
63.window.focus()使当前的窗口在所有窗口之前.
64.blur()指失去焦点.与FOCUS()相反.
65.select()指元素为选中状态.
66.防止用户对文本框中输入文本:onfocus=”this.blur()”
67.取出该元素在页面中出现的数量:document.all.tags(”div(或其它HTML标记符)”).length
68.JS中分为两种窗体输出:模态和非模态.window.showModaldialog(),window.showModeless()
69.状态栏文字的设置:window.status=’文字’,默认的状态栏文字设置:window.defaultStatus = ‘文字.’;
70.添加到收藏夹:external.AddFavorite(”http://www.dannyg.com/”t;,”jaskdlf”);
71.JS中遇到脚本错误时不做任何操作:window.onerror = doNothing; 指定错误句柄的语法为:window.on
error = handleError;
72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener…的多重继续.
73.JS中的self指的是当前的窗口
74.JS中状态栏显示内容:window.status=”内容”
75.JS中的top指的是框架集中最顶层的框架
76.JS中关闭当前的窗口:window.close();
77.JS中提出是否确认的框:if(confirm(”Are you sure?”))else{alert(”Not Ok”);}
78.JS中的窗口重定向:window.navigate(”http://www.sina.com.cn/”t;);
79.JS中的打印:window.print()
80.JS中的提示输入框:window.prompt(”message”,”defaultReply”);
81.JS中的窗口滚动条:window.scroll(x,y)
82.JS中的窗口滚动到位置:window.scrollby
83.JS中设置时间间隔:setInterval(”expr”,msecDelay)或setInterval(funcRef,msecDelay)或setTimeou
t
84.JS中的模态显示在IE4+行,在NN中不行:showModalDialog(”URL”[,arguments][,features]);
85.JS中的退出之前使用的句柄:function verifyClose(){event.returnValue=”we really like you and ho
pe you will stay longer.”;}} window.onbeforeunload=verifyClose;
86.当窗体第一次调用时使用的文件句柄:onload()
87.当窗体关闭时调用的文件句柄:onunload()
88.window.location的属性: protocol(http:),hostname(example.com),port(80),host(e
xample.com:80),pathname(”/a/a.html”),hash(”#giantGizmo”,指跳转到相应的锚记),href(全部的信
息)
89.window.location.reload()刷新当前页面.
90.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回
第几页,也可以使用访问过的URL)
91.document.write()不换行的输出,document.writeln()换行输出
92.document.body.noWrap=true;防止链接文字折行.
93.变量名.charAt(第几位),取该变量的第几位的字符.
94.”abc”.charCodeAt(第几个),返回第几个字符的ASCii码值.
95.字符串连接:string.concat(string2),或用+=进行连接
96.变量.indexOf(”字符”,起始位置),返回第一个出现的位置(从0开始计算)
97.string.lastIndexOf(searchString[,startIndex])最后一次出现的位置.
98.string.match(regExpression),判断字符是否匹配.
99.string.replace(regExpression,replaceString)替换现有字符串.
100.string.split(分隔符)返回一个数组存储值.
101.string.substr(start[,length])取从第几位到指定长度的字符串.
102.string.toLowerCase()使字符串全部变为小写.
103.string.toUpperCase()使全部字符变为大写.
104.parseInt(string[,radix(代表进制)])强制转换成整型.
105.parseFloat(string[,radix])强制转换成浮点型.
106.isNaN(变量):测试是否为数值型.
107.定义常量的关键字:const,定义变量的关键字:var

javascript代码在IE和Firefox间的区别

好易阁 — Fri, 26 Feb 2010 02:57:57 +0000

1. HTML 对象的 id 作为对象名的问题
IE：HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用
FF：不支持
解决方法：使用document.getElementById替代document.all

2. 如果控件只有name,没有id, 用getElementById时:
IE：可以找到对象
FF：返回NULL
解决方法：所有控件必须设置ID属性

3. Evel:
IE：支持，利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象
FF：不支持。
解决方法：统一使用getElementById(idName) 代替 eval(idName)。

4. Event：
IE：用全局对象window.event
FF：event只能在事件发生的现场使用，在调用函数时传入event对象
解决方法：使用之前做一下浏览器类型判断，各用各的。

5. 对象名称中美元符号‘$’ 改为使用下划线‘_’

6. 集合类对象问题
IE：可以使用()或[]获取集合类对象
FF：只能使用[]获取集合类对象
现有代码中存在许多，不能在 FF 下运行
解决方法:统一使用[]获取集合类对象。document.form.item(”itemName”) 这样的语句改为document.form.elements["elementName"]

7. 变量名与某 HTML 对象 id 相同的问题
IE：不能使用与 HTML 对象 id 相同的变量名
FF：可以使用
解决方法：在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行。
此外，最好不要取与 HTML 对象 id 相同的变量名，以减少错误。

8. Event定位问题
IE：支持event.x 和event.y
FF：支持event.pageX和event.pageY
解决方法，统一使用event.clientX和event.clientY，但是在FF中event.clientX 与 event.pageX 有微妙的差别（当整个页面有滚动条的时候），不过大多数时候是等效的。如果要完全一样，可以判断浏览器类型后对应使用。

9. 父结点的问题
IE：parentElement parentElement.children
FF：parentNode parentNode.childNodes
childNodes的下标的含义在IE和FF中不同，FF使用DOM规范，childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。

当html中节点缺失时，IE和FF对parentNode的解释不同，例如

IE：input.parentNode的值为空节点
FF：input.parentNode的值为form
FF中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)

10. const 问题
现有问题：
IE：不支持 const 关键字。如 const constVar = 32; 在IE中这是语法错误。
FF：支持
解决方法：不使用 const ，以 var 代替。

11. body 对象
IE：在body标签完全被读入之后才存在
FF：在body标签没有被浏览器完全读入之前就存在

12. 自定义属性问题
IE：可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性
FF：只能使用getAttribute()获取自定义属性.
解决方法：统一通过getAttribute()获取自定义属性

13. event.srcElement问题
IE：even.srcElement
FF：even.target
解决方法:使用时判断浏览器类型，各用各的。

14. 模态和非模态窗口
IE：支持模态和非模态窗口
FF：不支持
解决方法：直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口。

15. innerText
IE：innerText
FF：textContent

16. 类似 obj.style.height = imgObj.height 的语句
IE：有效
FF：无效
解决方法：统一使用obj.style.height = imgObj.height + ‘px’;

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/nileel/archive/2009/08/19/4461687.aspx

有关 JavaScript 的 10 件让人费解的事情

好易阁 — Wed, 24 Feb 2010 10:42:45 +0000

JavaScript 可算是世界上最流行的编程语言，它曾被 Web 开发设计师贴上噩梦的标签，虽然真正的噩梦其实是 DOM API，这个被大量的开发与设计师随手拈来增强他们的 Web 前端的脚本语言，如今越来越被重视，虽则如此，JavaScript 仍然拥有很多让人费解的东西。

1. 它以 Java 命名，但并不是 Java

它最初叫 Mocha，接着改名为 LiveScript，最后才确定命名为 JavaScript，根据历史记录，Java 的命名与 Netscape 和 Sun 之间的合作有关，作为交换条件，Netscape 在他们备受欢迎的浏览器中创建了 Java 运行时。值得一提的是，这个名字的出台几近一个玩笑，要知道，LiveScript 和 Java 在客户端脚本方面存在敌对关系。

不管怎么说，人们后来不得不一再澄清的一件事就是，JavaScript 和 Java 毫无关系。

2. Null 是个对象？

看看这段代码，它返回的是 object。

这实在令人费解，假如 null 表示空值，它怎么可以是对象？简单说，它是 JavaScript 最初版本的错误，这个错误甚至被微软的 JScript 直接借用。

3. NaN !== NaN

NaN，表示一个非数字的值，然而问题是，NaN不等于任何东西，甚至不等于它自己。

这显然不对，事实上，如果要判断一个值确实是 NaN，你需要用 isNaN() 函数。

4. 全局变量

对全局变量的依赖一直被视为 JavaScript 最坏的部分（ECMA 的 JavaScript 5 已经去掉了全局变量，请参阅 ECMA 推出 JavaScript 5 – 译者注）。对简单的页面，这无所谓，但复杂的页面，如果包含大量 JavaScript 脚本，你很难知道某个全局变量是在哪里声明的，如果几个全局变量不小心重名，就会引发错误。

5. 那些统统被探测为 Mozilla User-Agent 的浏览器

必须承认，事实上，这不是 JavaScript 的错，是各个浏览器有意为之。比如，以下是用 JavaScript 探测 Safari 时得到的结果：

是否注意到其中的第一个单词 Mozilla/5.0，为什么 Safari 会被探测为 Mozilla，尽管 Safari 后来已经纠正这一问题，但仍然不能解释为什么它们要这样误导开发者。事实上，你会发现，绝大多数浏览器把他们的 User Agent 设置为 Mozilla，答案要回到10年前，这更多是一种策略。

User Agent 是一段用来标识当前浏览器身份的字符串，世界上第一个浏览器 Mosaic，曾这样标志自己：

这很合理，因此当 Netscape 出来的时候，它保留了 Mosaic 这个传统，还在后面添加了一个加密方式部分。

到目前为止，一切安好，直到 IE3 发布，当 IE3 发布的时候，Netscape 正如日中天，那时，很多服务器和程序已经部署了客户端探测机制，以便认出 Netscape，虽然现在看来，这很值得争议，但当时并没什么。当 IE 初次推出它们的 User Agent 标志的时候，是这个样子：

这让 IE 很被动，因为 Netscape 已经能被很多服务器识别，因此，开发者们干脆希望 IE 被误认为 Mozilla，然后，再单独加一个 IE 的标签。

如今，几乎所有浏览器都步 IE 后尘，将自己标识为 Mozilla，这大概是一种连锁反应。

6. 不一致的函数范围

参看以下代码：

foo(bar.method) 返回结果不同原因是，method 函数是被当作 windows 对象，而不是 bar 下的对象调用的。要解决这个问题，我们必须从传递的匿名函数中调用 bar.method() 。

7. 位操作符

JavaScript 和 Java 有不少共同之处，如位操作。

& – and
| – or
^ – xor
~ – not
>> – signed right shift
??? – unsigned right shift
<< – left shift

看看第一个 & 操作符，使用 && 应该更有效，因为 JavaScript 和 Java 不一样，JavaScript 没有整数，需要来回转换，因此，转换操作花的时间更长。

8. 太多的空值类型

诸如 null, false, undefined 一类的值几乎表示同样的意思，它们之间的不同又让人很迷惑。

9. 算术问题

虽然 JavaScript 包含很多算术操作，但你不妨运行一下下面的算式，”.2+.4″ 应该等于 “.6″ 是不是，然而返回的确是 “0.6000000000000001″。JavaScript 在小数计算访问存在一些小问题。

为什么会这样？简单说，因为 JavaScript 使用 IEEE 标准进行二进制浮点运算，不过，对整数计算是没问题的。

10. 莫名其妙的代码错误

看看以下两段代码：

它们应该是一样的，只是 { 位置不同而已，是吧。然而我们再看下面的代码：

如果我们把其中的

换成

就会引发错误，这是因为 JavaScript 有一个功能，会纠正它认为错误的代码书写，它会自作聪明地在 return 这个词后面插入一个 “;” ，错误因此而生。

本文来源：http://net.tutsplus.com/tutorials/javascript-ajax/top-10-things-that-javascript-got-wrong/
中文编译来源：锐商企业CMS网站内容管理系统官方站

2009 年度最佳 jQuery 插件

好易阁 — Wed, 16 Dec 2009 11:39:15 +0000

jQuery 是个宝库，而 jQuery 的插件体系是个取之不竭的宝库，众多开发者在 jQuery 框架下，设计了数不清的插件，jQuery 的特长是网页效果，因此，它的插件库也多与 UI 有关网站推选的2009年度最佳 jQuery 插件拉洋片:

在一个固定区域，循环显示几段内容，这种方式很像旧时的拉洋片，2009年，这种 Web 效果大行其道，jQuery 有大量与此有关的插件，以下插件无疑是最佳的。

AnythingSlider：由 CSS-Tricks 的 Chris Coyier 设计，功能齐全，应用十分广泛。
Easy Slider：这个 Content Slider 插件既包含传统“前后”导航模式，又包含页码式导航。
Coda-Slider 2.0： Coda-Slider 2.0 是对 Panic Coda 网站上对应效果的模仿。

图片库

那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已经去过，借助 jQuery，这种效果已经可以在本地实现，以下是本年度备受欢迎的几个 jQuery 图片库插件。

Galleria：这是一个基于 jQuery 的图片库，可以逐个加载图片并显示缩略图。
jQuery Panel Gallery：一个可以高度定义的图片库插件，无需对单个图片进行任何处理，这个插件会帮你完成一切。
slideViewer： slideViewer 会检查你的图片列表中的编号，动态创建各个图片的页码浏览导航。
Supersized：一个令人惊讶的图片循环展示插件，包含各种变换效果和预加载选项，会对图片自动改变尺寸以适应浏览器窗口。

导航

我们相信，作为网站的导航系统，应该越简单，越易用越好，然而，假如你确实希望实现一些更炫的效果，jQuery 就是最好的选项，以下插件是09年最好的 jQuery 导航插件。

jquery mb.menu
Horizontal Scroll Menu with jQuery
AutoSprites

表单和表格

在 Web 设计中，表单和表格都是不是很讨人喜欢的东西，但你不得不面对，本年度出现几个不错的 jQuery 插件帮你完成这些任务。

Password Strength：这个插件帮你评估用户输入的密码是否足够强壮。
Ajax Fancy Capcha：顾名思义，一个支持 Ajax 又很炫的 jQuery Captcha 插件，它使用了很人性化的验证机制。
Chromatable：这个插件可以帮助你在表格上实现滚动条。
jqTransform：一个式样插件，帮助你对表单中的控件进行式样控制。
Uploadify：实现多个文件同时上传。
jExpand ：一个很轻量的 jQuery 插件，使你的表格可以扩展，在一些商业应用中，可以让表格更容易组织其中的内容。

新闻来自:COMSHARP CMS 企业网站内容管理系统官方站

四种表单验证方法的分析和比较

好易阁 — Sat, 10 Oct 2009 02:50:47 +0000

任何可以交互的站点都有输入表单，只要有可能，就应该对用户输入的数据进行验证。无论服务器后端是什么样的系统，都不愿意把时间浪费在一些无效的信息上，必须对表单数据进行校验，若有不符合规定的表单输入，应及时返回并给出相应的提示信息。本文将列举四种不同原理的表单验证方法，并给出各方法在 PHP 服务器上的实现。

回页首

浏览器端验证

传统上，表单数据一般都通过浏览器端的 Javascript 验证。浏览器端的验证速度快，若有不符合要求的输入，响应信息快速的返回给用户。由于验证数据不需要提交给服务器，不会加重服务器的负载。一个浏览器端验证的过程如图 1 所示，表单提交，若通过验证则提交服务器处理，不成功则回馈给用户。
图 1. 浏览器端验证原理图

本文给出的各种表单验证方法源代码均以一个简单的表单为例，该表单包含“UserName”和“Password”两个文本输入框，及一个“Submit”按钮。代码清单 1 给出了浏览器端 Javascript 验证的例子。若“UserName”或“Password”输入不符合要求，通过弹出框的形式提示用户，并返回 false, 停止表单提交。
清单 1. 浏览器端 Javascript 验证代码

 function validform(thisForm)
   {
      error_string = "";
      if((message=checkusername(thisForm.username))!="")
        {
          error_string="UserName:"
          error_string += message;
          alert(error_string);
          return false;
         }
      if((message = checkpassword(thisForm.pass))!="")
        {
          error_string="Password:"
          error_string += message;
          alert(error_string);
          return false;
         }
       return true；
    }

从图 1 可以看出这种表单验证方法有一个致命的缺点，很多工具可以在表单检验过后、浏览器发送请求前截取表单数据，攻击者可以修改请求中的数据，从而绕过 JavaScript，将恶意数据注入服务器，这样会增加 XSS（全称 Cross Site Scripting）攻击的机率。对于一般的网站，都不赞成采用浏览器端的表单验证方法。

回页首

浏览器端和服务器端双重验证

浏览器端和服务器端双重验证方法在浏览器端验证方法基础上增加服务器端的验证，其原理如图 2 所示，该方法增加服务器端的验证，弥补了传统浏览器端验证的缺点。若表单输入不符合要求，浏览器端的 Javascript 验证能很快地给出响应，而服务器端的验证则可以防止恶意用户绕过 Javascript 验证，保证最终数据的准确性。
图 2. 浏览器端和服务器端双重验证原理图

除了客户端 Javascript 验证，该方法增加了服务器端的 PHP 验证，示例代码如清单 2 所示，checkusername() 和 checkpassword() 是 PHP 语言编写的两个验证接口函数，根据 $error 结果，确定表单的有效性。
清单 2. 服务器端表单的 PHP 验证

 if(isset($_POST['username']))
 {
  $usermsg  = checkusername($_POST['username']);
  if($usermsg != '')
    $error = true;
  if(isset($_POST['pass']))
  {
    $passmsg = checkpassword($_POST['pass']);
    if($passmsg != '')
    $error = true;
  }
 }

此方法的缺点一目了然，必须维护两份代码实现相同的功能，增加开发人员的工作量，不利于后续开发。浏览器端和服务器端双重验证方法也存在一个风险，对有些表单验证的规则服务器也许不想公开给用户，而浏览器拷贝了服务器端验证的功能，向用户公布验证规则。

回页首

服务器端验证

综合上述两种验证方法，现在考虑使用服务器端的验证方法，该方法结构非常简单，其原理如图 3 所示。客户端负责表单提交，服务器端验证表单，若发现错误数据，则回传表单页面，错误信息被加到同一页面中。若验证通过，则处理表单。
图 3. 服务器端验证原理图

此方法在遇到非法输入需要回传表单时，除了加载错误提示信息在此页面上，还必须注意，此时表单内容必须维持表单提交时的用户输入，这样用户才能将错误的表单输入与错误提示信息联系起来，有助于用户填入正确的输入。可以借助 DOM 技术中的 appendChild 功能追加显示相关的错误的提示信息，其实现如代码清单 3 所示，其效果可以参考图 4。
清单 3. 利用 DOM 技术实现提示信息代码

 find_obj = document.getElementsByName("username");
  var sp1 = document.createElement('span');
  sp1.className= 'formerror';
  sp1.appendChild(document.createTextNode(usermsg));
  find_obj[0].parentNode.appendChild(sp1); 

  find_obj = document.getElementsByName("pass");
  var sp2 = document.createElement('span');
  sp2.className= 'formerror';
  sp2.appendChild(document.createTextNode(passmsg));
  find_obj[0].parentNode.appendChild(sp2);

图 4. 加载错误信息效果图

由于验证交由服务器端处理，该方法的输入响应速度不如浏览器端验证，主要受网络繁忙及服务器荷载的影响。同时，若同一页面的其他表单耗时较大，此回传页面方法的响应时间会进一步加大。

回页首

基于 Ajax 技术的验证

基于 Ajax 技术的表单验证技术综合了服务器端验证，浏览器端及服务器端双重验证方法的优点，摒弃了两者的缺点。服务器端验证方法结构清晰，可以防止恶意攻击，其主要问题在于若输入错误表单信息，需重传整个页面，同时若同一页面有多个表单，回传整个页面可能会增加用户等待的时间。浏览器端及服务器端的双重验证响应速度快，其问题在于代码冗余。

基于 Ajax 技术的验证方法也需要做两次验证：首先是回馈验证，无论表单数据准确与否，服务器均给出反馈信息，其作用等同于双重验证中的浏览器端的验证；表单处理前的验证防止恶意修改，其作用等同于双重验证中的服务器端的验证。其原理如图 5 所示，一旦有表单提交，首先构建表单信息字段，交由 Ajax engine 发送给服务器端验证，服务器将验证结果发送给用户，客户端根据回馈信息，判断表单输入是否正常，在 Ajax 技术下，对用户而言，以上操作均在后台运行，不会影响当前页面各表单的状态。若是非法输入，则回馈提示信息给用户；若是正常输入，客户端将按照正常方法提交表单。为了防止恶意修改，表单处理之前还需验证，此步验证与之前验证共用代码。
图 5. 基于 Ajax 技术验证原理图

有关 Ajax 技术的知识，可以参考 developerWorks 上的系列文章。Ajax 核心概念之一是 XMLHttpRequest 对象，这是一个 JavaScript 对象，创建该对象时，各种浏览器方法有所不同，具体实现可以参考源代码。

回馈验证主要涉及两个问题：首先是构建验证字段，其次是回馈信息的格式。

由于验证字段和正常表单字段共用验证代码，验证字段格式完全遵循表单提交时的格式。为某表单构建验证字段代码如清单 4 所示。其中 checkflag 字段的作用是区分两种验证。
清单 4. 构建验证字段代码

 var postData = "";
 var fields = form.elements;
 for (var i=0; i < fields.length; i++) {
 if (fields[i].name != "") {
	  type = fields[i].type;
	   if ((type == 'radio') || (type == 'checkbox')) {
	  	 if (!fields[i].checked) { continue; }
    }
 if ((type == 'submit')&&(!(fields[i].name == submitName))) {
	   continue;
 }
 if (postData) { postData += "&"; }
 postData += fields[i].name + "=" + encodeURIComponent(fields[i].value);
          }
 }
     postData += "&checkflag=1";

回馈信息主要在浏览端的 Javascript 中处理，不同的格式需要不同的处理方法。在传统 Ajax 动态页面处理中，回馈信息包含大量信息，采用 xml 格式，可以借助 DOM 技术处理，简化程序。在本例中，回馈信息只包含验证结果信息，简单数据格式就能满足要求，客户端的 Javascript 分析回馈信息，根据结果确定是否提交完整的表单，具体实现请参考源代码。

基于 Ajax 技术的验证方法代码相对比较复杂，错误的表单需要来回两次网络交互，而正确的提交则需要三次网络交互。该验证方法的响应时间与网络繁忙程度有很大的关系。相对于纯服务器端验证，该方法在验证阶段不需要重新下载整个页面，在多个表单共存在同一页面的场合，基于 Ajax 技术的验证方法不会影响同一页面的其它表单。

回页首

小结

上述四种验证方法各有优缺点，用户应该根据需求选择不同的方法。浏览器端验证方法适用于对表单输入要求并不是特别严格的场所；浏览器端和服务器端双重验证应用比较广泛，但是该方法不利于后续开发；服务器端验证方法结构简单，但是开发代码相对复杂；基于 Ajax 技术的验证方法，对网络的要求高，但是该方法结构清晰，表单验证与表单处理过程分离但共用验证代码，简化开发人员的工作。

回页首

下载

描述	名字	大小	下载方法
示例代码	code.zip	2.8KB	HTTP

20+免费优雅简洁wordpress主题

好易阁 — Mon, 24 Aug 2009 06:42:56 +0000

优雅简洁的主题设计可以让你的网站或博客仅仅通过文字表现就能变成不一样的视觉感受以下为你收集了20多款此类型的WordPress主题:

好易阁|免费杀毒软件|Web技术 » WEB前端应用

10 款网页设计师必知的免费 Android 应用

100+ javascript技巧集合

javascript代码在IE和Firefox间的区别

有关 JavaScript 的 10 件让人费解的事情

2. Null 是个对象？

3. NaN !== NaN

4. 全局变量

5. 那些统统被探测为 Mozilla User-Agent 的浏览器

6. 不一致的函数范围

7. 位操作符

8. 太多的空值类型

9. 算术问题

10. 莫名其妙的代码错误

2009 年度最佳 jQuery 插件

四种表单验证方法的分析和比较

20+免费优雅简洁wordpress主题

30个漂亮的Photoshop按钮和徽章制作

7款优秀的CSS框架

JS 操作IE游览器常用函数

使用 jQuery- 将桌面应用程序引入浏览器

注册申请帐号时强迫用户在一定时间内看注意事项的JS代码