WEB项目前端表单认证遇到的问题的反思及总结

笔者是一名PHP程序员之前心态过于浮躁，一直学习所谓的架构或者产品创意相关的知识，导致最近在做几个表单的前端认证的时候由于代码的遗忘，出现了很多前端表单认证的问题，现在简单罗列一下希望其他人看到的时候引以为戒。

1，页面应当以统一的方式进行错误提示语的提示

一般情况下不要既使用页面红色提示语又用弹窗进行提示，尤其如果页面在使用红色提示语的时候服务端回调信息的处理，需要找到正确的提示位置并进行相应的提示语提示。

2，在比较简单的项目当中页面的验证可以使用现成的插件而不是自己写验证的js规则

比较好用的有jquery.validate.js 或者validator.js 其中后者可能兼容性要稍微好一点，网上也有其他介绍如何在其他框架下兼容使用验证插件的教程如zepto.js(可以理解为手机端的jquery.js，函数的命名规则可能与jquery有部分差异)框架。

3，严格对验证的提示语进行审查

不可以等测试来反映相关的问题在进行修改，尤其对产品遗忘的相关常识性问题进行验证（笔者对身份证的加权因子验证记忆特别深）。

4，讲究单个字段的验证规则顺序

对单个字段进行验证的时候需要进行非空验证，非空格验证（这一点非常重要），是否是汉字验证，长度验证，正则验证，关联字段验证，其他项目特定的前端规则验证，与后台交互的唯一性，存在性，及后台的其他规则验证，验证的顺序应该有一定的逻辑一般上述验证的顺序即可（笔者对汉字认证和长度验证哪个放在前面还不太清楚？），一般前端部分在前面并按照逻辑的复杂程度由简单到复杂进行排序，后台的ajax验证应当放在后面并注意ajax反馈的时候应当对当前字段及相关字段的状态及属性进行相关的操作和变更。

5，考虑表单验证的层级

一般的项目在做前端验证的时候应当考虑到验证的顺序及keyup层级的验证，blur失去焦点时的验证，执行提交时的验证，以及反馈结果之后的后端报错的显示，与后端在进行交互的时候要考虑ajax验证的适中不能过多的进行后端的请求也不能所有都交给提交时进行验证，此时要考虑ajax验证的带宽及服务器消耗成本以及提交之后的逻辑复杂性成本以及结合用户体验，一般长表单可多用ajax验证，短表单少用ajax规则验证（这类知识笔者也不太熟悉需要加强学习）。

6，考虑字段间的因果关系

进行验证的时候要考虑前后字段的因果关系如果前面一个字段为后面一个字段的因（如先填写图形验证码之后才可以进行手机验证码的发送），前一个字段在验证不成功时后一个字段可以直接不给填写或者填写之后报前一个字段（因）的错误。

7，关于图片上传插件

笔者在进行表单书写的时候涉及到了前端图片插件webupload.js的使用也遇到很多问题，总结如下：

1），图片必须进行过滤一般对格式，大小，数量，重复性进行验证。

2），图片上传之后的报错信息应当寻求适当并且醒目合乎用户体验的提示方式，一般不能按照接口的提示语进行提示，这一点很多网站都做得不好尤其需要注意。

3），图片上传成功之后应当显示图片的缩略图从而减少页面的压力应该在后端做统一的图片压缩备份处理。

4），一般情况下提交的参数是图片的地址或者编号信息注意一定要在图片上传之后回调到当前的页面当中以隐藏域或者其他的方式进行提交。

5），在图集的上传当中如果需要删除图片需要做一下几个层次的删除既服务端图片的物理删除，当前页面图片元素的删除，当前表单隐藏域或者其他提交方式参数或数组的删除或数组的重整，图片插件缓存的删除（否则图片上传重复性报错已经删除的图片还会做不可重复提交的报错）。

8，表单成功之后的处理

另外如果以ajax异步提交上传了表单，在接受到成功信息之后一定要对当前页面进行刷新或者执行跳转操作，要不然重复提交表单时会遇到各种各样的问题。

9，此外笔者在进行开发的时候还遇到几个笔者不熟悉的问题：

1），在js当中一般不可以在函数当中写默认值低版本的浏览器会执行报错，笔者使用IE8浏览器进行测试就出现了不可理解的错误，一般函数需要几个字段在调用的时候就需要填写几个字段以免不必要的报错（笔者主要比较习惯PHP的开发方式了）。

2），图片上传插件一般会自动判断浏览器并依据浏览器的版本显示是使用H5方式上传还是flash方式进行上传，笔者遇到低版本浏览器无法上传的时候十分头疼后来才发现是地址写错了（地址一般请使用绝对地址，测试服地址和正式服地址的差异可以用window.location.href的方式进行域名的引用）。

后记：这篇文章是笔者的第一篇文章，笔者之前做PHP的前端的东西一般用现成的前端框架直接套用，所以会出现很多很多的问题希望大神们能够原谅并多多指导，笔者衷心希望这篇文章对需要的人哪怕有一丁点的启发，希望大家一起分享遇到的问题一起学习，一起进步！