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

look_w

服务器端验证综合上述两种验证方法，现在考虑使用服务器端的验证方法，该方法结构非常简单，其原理如图 3 所示。客户端负责表单提交，服务器端验证表单，若发现错误数据，则回传表单页面，错误信息被加到同一页面中。若验证通过，则处理表单。
图 3. 服务器端验证原理图此方法在遇到非法输入需要回传表单时，除了加载错误提示信息在此页面上，还必须注意，此时表单内容必须维持表单提交时的用户输入，这样用户才能将错误的表单输入与错误提示信息联系起来，有助于用户填入正确的输入。可以借助  中的 appendChild 功能追加显示相关的错误的提示信息，其实现如代码清单 3 所示，其效果可以参考图 4。
清单 3. 利用 DOM 技术实现提示信息代码

1 2 3 4 5 6 7 8 9 10 11

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 核心概念之一是  对象，这是一个 JavaScript 对象，创建该对象时，各种浏览器方法有所不同，具体实现可以参考 。
回馈验证主要涉及两个问题：首先是构建验证字段，其次是回馈信息的格式。
由于验证字段和正常表单字段共用验证代码，验证字段格式完全遵循表单提交时的格式。为某表单构建验证字段代码如清单 4 所示。其中 checkflag 字段的作用是区分两种验证。
清单 4. 构建验证字段代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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

回馈信息主要在浏览端的 Javascript 中处理，不同的格式需要不同的处理方法。在传统 Ajax 动态页面处理中，回馈信息包含大量信息，采用 xml 格式，可以借助 DOM 技术处理，简化程序。在本例中，回馈信息只包含验证结果信息，简单数据格式就能满足要求，客户端的 Javascript 分析回馈信息，根据结果确定是否提交完整的表单，具体实现请参考源代码。
基于 Ajax 技术的验证方法代码相对比较复杂，错误的表单需要来回两次网络交互，而正确的提交则需要三次网络交互。该验证方法的响应时间与网络繁忙程度有很大的关系。相对于纯服务器端验证，该方法在验证阶段不需要重新下载整个页面，在多个表单共存在同一页面的场合，基于 Ajax 技术的验证方法不会影响同一页面的其它表单。
小结上述四种验证方法各有优缺点，用户应该根据需求选择不同的方法。浏览器端验证方法适用于对表单输入要求并不是特别严格的场所；浏览器端和服务器端双重验证应用比较广泛，但是该方法不利于后续开发；服务器端验证方法结构简单，但是开发代码相对复杂；基于 Ajax 技术的验证方法，对网络的要求高，但是该方法结构清晰，表单验证与表单处理过程分离但共用验证代码，简化开发人员的工作。