基于规则的表单处理（极简主义）

简介

    作为一个懒人，在项目做多了之后，必然而然的会去思考如何简化日复一日的重复劳动，从辛劳的体力劳动中解脱出来将精力用到更有用的地方去。而作为B/S系统的开发，消耗最多时间的莫过于表单处理。只要有信息交互，不可避免的会用到表单，从最原始的POST/GET到目前流行的Ajax，从Struts1的流行到WebWork、Struts2、SpringMVC等服务器端架构的设计，初衷都是为了简化复杂的表单业务逻辑处理。然而这些似乎还不够，某个组件或框架本身只能解决它所在位置上的单一问题，如何从众多框架的设计思想中提炼精髓，有效的组合运用，最终实现最少的代码量满足最多的业务需求，才是软件设计开发的王道...

设计思想

1. 可用性
2. 最少的代码
3. 直观的信息表达
4. 可扩展性
5. 可重用性
6. 任何设计都不是万能药

现阶段解决方案

作为懒人当然先用流程的开源框架最为方便（精力有限，有余力的同学可自行开发）。

 

1. 基于Jquery-Tools的声明式表单校验及信息提示组件
2. 基于Jquery-Form的表单自动序列化及Ajax提交组件
3. 基于Jquery-Loading的遮罩层，用于提交后遮盖页面防止提交过程中的意外操作。

逻辑定义

1. 采用Ajax方式的提交，页面无刷新，因此也不再需要ActionFrom之类的服务端支持；
2. 表单的method和action标识了Ajax提交的模式及服务路径；
3. 声明式的校验逻辑直接定义到对应的表单控件。如required代表该字段必选，max-length代表可输入的最大长度；
4. 通过传递form对象给最终的提交方法，用方法封装的方式实现从校验到提交到提交完成回调的完整逻辑，简化页面的代码量（通常一个系统中页面提交的逻辑只会有几种）；

业务流程

1. 提交方法执行后，首先触发表单校验；
2. 通过遍历表单控件及其上绑定的校验规则，对表单控件输入的有效性进行校验，校验失败时提示相关失败信息，并终止提交；
3. 当所有校验都通过时，自动调用Ajax提交，提交参数通过表单的自动序列化得到；
4. 服务器端代码执行完后，返回响应，触发Ajax的回调函数（通常会提供一个默认的），回调函数自动执行；
5. 完成表单。

示例截图

除了为表单控件多加了几个属性，与通常的表单没有任何区别，更没有复杂的JS代码了。

注：更精简的模式是直接定义提交按钮为submit，然后拦截submit，这样连按钮都跟原来没区别了。

现阶段的问题

 

1. 信息提示对于动态控件支持不够：如类似MiltipleSelect组件，将默认的<select>隐藏，改用DIV来模拟，由于popup信息提示依赖于控件的定位，控件被隐藏后popup将错位。
2. 对于checkbox之类的多选控件支持不够：如服务端自动生成的多个checkbox，需要指定某些需要校验某些不需要的情况