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

核心提示： 此方法的缺点一目了然，必须维护两份代码实现相同的功能，四种表单验证方法的分析和比较(3)，增加开发人员的工作量，不利于后续开发，可以借助 DOM 技术 中的 appendChild 功能追加显示相关的错误的提示信息，其实现如代码清单 3 所示，浏览器端和服务器端双重验证方法也存在一个风险，对有些

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

服务器端验证

综合上述两种验证方法，现在考虑使用服务器端的验证方法，该方法结构非常简单，其原理如图 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. 加载错误信息效果图