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

前言

任何能够交互的站点都有输入表单，只要有可能，就应该对用户输入的数据进行验证。不管服务器后端是什么样的系统，都不肯意把时间浪费在一些无效的信息上，必须对表单数据进行校验，如有不符合规定的表单输入，应及时返回并给出相应的提示信息。本文将列举四种不一样原理的表单验证方法，并给出各方法在 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 技术的验证方法，对网络的要求高，可是该方法结构清晰，表单验证与表单处理过程分离但共用验证代码，简化开发人员的工做。