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

核心提示： 有关 Ajax 技术的知识，可以参考 developerWorks 上的 系列文章，四种表单验证方法的分析和比较(5)，Ajax 核心概念之一是 XMLHttpRequest 对象，这是一个 JavaScript 对象，但是该方法结构清晰，表单验证与表单处理过程分离但共用验证代码，创建该对象时，

有关 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 技术的验证方法，对网络的要求高，但是该方法结构清晰，表单验证与表单处理过程分离但共用验证代码，简化开发人员的工作。

本文示例源代码或素材下载