表单校验和方法界面标准

公共问题梳理

1表单验证

表单验证分为客户端验证和服务器端验证。

1.1客户端验证

系统采用jquery.ext.js的公共表单验证来校验表单，

上图中，大部分的验证场景都已经涵盖。当验证方法不满足验证需求是，自行添加验证代码到该函数中，并进行功能验证。

字段长度校验。由于表单公共校验方法的maxlength,minlength没有提示信息，所以表单校验长度的方法使用range,rangelength来代替，禁止使用maxlength.

rangelength用以判断字符串。

range 用以判断数字。

校验字符串的时候，需要根据数据库字段的长度来计算，例如某个表的字段长度varchar2(500)，长度应该是500/2.5=200.除不尽的时候，舍弃余数。

例如：

每个输入字段校验的范围：应基本包含长度，数据类型，是否必填。另外，若非必填项，当用户输入时，也需要校验。

上传文件类表单校验：需要在swf-upload组件中定义上传的文件大小，类型。服务器端也需要以白名单的方式来校验文件类型，文件大小。

重复提交校验：客户端需要控制提交按钮点击的次数，第一次点击后，把提交按钮禁用掉。服务器端重复提交可以采用拦截器方式来做判断。决定：客户端和服务器端都做校验。

修改方法：每个小组负责页面的表单逻辑验证，包括新开发功能和已有功能。

1.2 服务器端校验

采用公用的注解类来标记表单属性。Hibernate-validtor提供了比较通用的校验类，但一些特殊的校验需要自己定义。为了保证表单提交时，服务器端验证失败，用户输入数据不丢失，FORM的提交方式需要改造，采用AJAX-FORM的提交方式。

具体实现方法：需要在FORM-BEAN中添加注解，例如下图：

另外，还需要开发相应的工具类，进行表单公共验证的控制。该方法提供给其它Controller 继承后，只需要做简单的代码调整即可。

服务器端数据验证的范围：只针对数据的添加、编辑操作。

服务器端代码修改注意事项：

a.所有的需要添加服务器端教研的Controller，都需要继承一个基类。

b.关于添加和修改的方法需要调整如下:

配合服务器端教研需要修改html的表单提交方式。以角色编辑的edit.html为例子

2.界面美观美化（作参考、后期有美工设计）

系统大部分(95%)界面要保持统一，除了特殊界面(新闻内容编辑)外，同一个界面中，同一类型的组件的长宽高尽量一致，不能保持一致的，长宽高的标准不能超过3个(强制要求)。单选按钮的设计，选项最多不能超过三个，超过三个使用下拉框。下拉框的选项个数最好不要超过10个，超过十个会造成用户选择困难，可以使用弹出窗口选择的方式(非强制要求)。

简单列表操作模块界面设计要求：

要求尽量在一个界面中完成所有业务操作，添加和编辑界面以div层的形式展示。Div 层的窗口规格要尽量保持一致，例如：窗口的长宽高、颜色、标题、提示信息等。

样例程序模块：维护-词汇管理—热词管理。

查询窗体设计基本要求：

查询窗体组件排列居左，组件多自动换行的，重新调整排列方式，设计为两行或多行。

3.树形菜单样式问题

树形菜单体现用户的操作，用户选择和点击了树节点后，要有明显的操作痕迹，例如节点底色加亮显示。

内容新闻管理：不使用下拉框，使用树形菜单展示栏目，并且把专题管理放到菜单栏顶部的按钮中。

依赖：css样式修改需要前端开发人员配合。