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

look_w

前言任何可以交互的站点都有输入表单，只要有可能，就应该对用户输入的数据进行验证。无论服务器后端是什么样的系统，都不愿意把时间浪费在一些无效的信息上，必须对表单数据进行校验，若有不符合规定的表单输入，应及时返回并给出相应的提示信息。本文将列举四种不同原理的表单验证方法，并给出各方法在 PHP 服务器上的实现。
浏览器端验证传统上，表单数据一般都通过浏览器端的 Javascript 验证。浏览器端的验证速度快，若有不符合要求的输入，响应信息快速的返回给用户。由于验证数据不需要提交给服务器，不会加重服务器的负载。一个浏览器端验证的过程如图 1 所示，表单提交，若通过验证则提交服务器处理，不成功则回馈给用户。
图 1. 浏览器端验证原理图本文给出的各种表单验证方法 源代码 均以一个简单的表单为例，该表单包含“UserName”和“Password”两个文本输入框，及一个“Submit”按钮。代码清单 1 给出了浏览器端 Javascript 验证的例子。若“UserName”或“Password”输入不符合要求，通过弹出框的形式提示用户，并返回 false, 停止表单提交。
清单 1. 浏览器端 Javascript 验证代码

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

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，将恶意数据注入服务器，这样会增加 （全称 Cross Site Scripting）攻击的机率。对于一般的网站，都不赞成采用浏览器端的表单验证方法。
浏览器端和服务器端双重验证浏览器端和服务器端双重验证方法在浏览器端验证方法基础上增加服务器端的验证，其原理如图 2 所示，该方法增加服务器端的验证，弥补了传统浏览器端验证的缺点。若表单输入不符合要求，浏览器端的 Javascript 验证能很快地给出响应，而服务器端的验证则可以防止恶意用户绕过 Javascript 验证，保证最终数据的准确性。
图 2. 浏览器端和服务器端双重验证原理图除了客户端 Javascript 验证，该方法增加了服务器端的 PHP 验证，示例代码如清单 2 所示，checkusername() 和 checkpassword() 是  编写的两个验证接口函数，根据 $error 结果，确定表单的有效性。
清单 2. 服务器端表单的 PHP 验证

1 2 3 4 5 6 7 8 9 10 11 12

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

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