设计说明

form表单封装内容主要有：

1. 元素focus/blur，selected/checked渐变效果。

2. 提示效果，其中提示框位置支持可调整，分别为：上（.top）、右（默认）、下（.bottom）、左（.left）。

3. 元素监听校验，通过自定义属性（data-validator）和正则配合处理。

4. 省市区级联选择。

5. textarea字数检测。

6. 富文本编辑器。

7. 单/多文件上传。

7. 可编辑table。

8. form内容序列化和反序列化，其中二者取的是输入框name（即对象key值）的对应值（即对象value），操作的是json对象。

9. 表单禁止重复提交方法（开发中）。

10. 表单提交前不符合校验标准内容的提示处理（开发中）。

开发规范

使用时，需嵌套到栅格或panel中，以满足适配要求。

使用时，主体结构不能修改，即模块必须为form标签（以便序列化和反序列化操作）包裹下的.form-horizontal，内填充即输入框内容。

输入框内容：

输入/选择组件均由.form-group包裹，内容使用栅格划分区域，其中默认为：标题区.col-md-3，输入框.col-md-6，输入内容提示和错误提示.col-md-3，若无错误提示，输入内容提示则为.col-md-1。

form表单提交基本分以下几个步骤：

1. 调用【是否符合校验标准】方法，若返回值为true，则进入步骤2，否则，return。

2. 调用【表单禁止重复提交】方法。

3. 调用【序列化】方法，如对数据有特殊需求，则另行处理。

4. 请求接口发送数据，拿到返回值后，调用【关闭表单禁止重复提交】方法。

form dom结构

<form id="userForm"> <div class="form-horizontal"> <div class="form-group"> <label class="col-md-3"> <span class="text-star">*</span> <span class="text-title">输入框名称</span> </label> <div class="col-md-6"> <input type="text" placeholder="此处输入内容" class="form-control" data-validator='{"types":"isNonEmpty,isNumber","regex":"","errorMsg":""}'> </div> <div class="col-md-3"> <a href="javascript:;" class="form-tooltip bottom"> <i class="icon-s icon-tips"></i> <span>提示信息提示信提示信息提示信提示信息提示信</span> </a> <span class="form-error-msg"></span> </div> </div> </div> </form>

序列化form内容

                                    var userInfo = $('#userInfoForm').serializeJson();//jquery对象操作的是form的ID
                                

反序列化form内容

                                    $('#userInfoForm').deserializeForm(formData);//formData为json数据