form

• 描述：用于表单校验的组件
• 创建人：linzp
• 创建时间：2018年06月21日 11:12
• 仓库地址: [email protected]:fe-arch/knx-core.git

API

功能

form 是一个表单校验框架，可以帮助你将校验逻辑从业务代码里面分离出去。

1. 实现了字段的按规则串联校验，字段远程校验
2. UI和校验逻辑完全分离
3. 实现了默认校验规则，预设校验规则，当前form校验规则，通过简单的配置字段的校验规则名称来进行规则查找
4. 支持本地form数据缓存
5. 自动处理表单提交按钮的提交中，是否可提交状态

设计思路

form 主要分为以下几个模块：

1. Form 用来管理表单数据，本地缓存，处理提交逻辑，和表单当前的校验状态。

2. field 封装了字段的校验逻辑，和Form同步数据。field是一个高阶组件，它接收一个输入组件，返回一个具有字段校验功能的组件。

3. submit 用来触发表单提交的按钮的高阶抽象。它管理了当前表单的提交状态和是否校验通过状态。

4. fieldDecorator 字段外观装饰器，用来封装字段UI，将错误提示以某种状态提示用户，控制组件在不同校验状态的UI表现。通常根据UI自行实现。 @eui/ic-field-decorator 实现了eui规范的decorator，可以直接使用

如何使用

更多使用示例，请参考@eui/ic-field-decorator 的 example

Form 参数描述

| 参数名 | 类型 | 是否必须 | 说明 | 默认值 | | --- | --- | ---- | --- | --- | | onSubmit | function(data) | 是 | 当表单提交且每个字段都校验通过时调用该方法，接收一个data参数，为表单当前的数据 | - | | onPrevSubmit | function(isPass,validateInfo,data)|否| 当表单提交时调用该方法，不管校验是否通过都会调用，并且先于onSubmit调用，接受三个参数,isPass 当前表单校验是否通过 validateInfo 当前表单的各个字段的校验结果 data 当前表单的数据| - | | onError | function(validateInfo,data) |否| 当表单提交且校验不通过时调用该方法，后于onPrevSubmit调用 接受两个参数,validateInfo 当前表单的各个字段的校验结果 data 当前表单的数据 |-| | cache | string | 否 | 用来标示表单数据缓存到本地localstorage的key值，如果传入值，则标示缓存开启，注意 cache值相同的表单，数据会相互覆盖 | - | | data | object | 否 | 表单的初始值，可以通过该参数给表单内的各个字段填写组件赋值| - | | rules | object | 否 | 可以定义规则，供当前表单内的各个Field的rule识别 | - |

Form API描述

| 名称 | 参数列表 | 返回值 | 功能说明 | | --- | ---- | --- | ---- | | set data | data | this | 一个setter ，可以从Form实例 form.data={name:'xxx'} 给表单赋值，改变表单内对应字段的值 | | get data | - | data | 一个getter，可以从Form实例通过 const data=form.data 获取当前表单的值 | | submit | - | Promise | 可以从Form实例调用该方法提交表单 | | setError | name,errInfo| Promise | 调用该方法给name字段设置一条错误信息 |

Field 参数描述 （指被field修饰后返回的组件，新加的参数）

| 参数名 | 类型 | 是否必须 | 说明 | 默认值 | | --- | --- | ---- | --- | --- | | name | string | 是 | 字段名称，会作为表单的data里的key值，同一表单不能重复 | - | | label | string | 否 | 字段的别名，一般为中文名，会拼接到errMsg里面作为错误说明，有的Decorator会将其显示给用户，作为该字段的说明| '' | | errMsg| string | 否 | 指定当前字段的错误信息，不管该字段是哪条规则导致校验不通过，都显示该提示 | '' | | rule | string/function/RegExp | 否 | 定义表单校验规则 | - | | noTrim | boolean | 否 | 获取到的值是否需要做trim处理，默认会处理，如果该参数为true则不处理，相应了校验长度时也会计算前后空格 | false |

Decorator 参数描述 （指被fieldDecorator修饰后返回的组件，新加的参数）

| 参数名 | 类型 | 是否必须 | 说明 | 默认值 | | --- | --- | ---- | --- | --- | | value | any | 是 | 当前字段的值，由field自动传入 | - | | triggerValidate | function | 是 | 触发当前字段的校验 | - | | addEventListener | function(type,callback) | 是 | 添加表单内部事件监听 ,接受两个参数 type为要监听的事件的名称(submit,prevSubmit,error,validate,dataChange) callback为事件触发时回调函数| - | | removeEventListener | function(type) | 是 | 移除表单内部事件监听，接受一个参数 type为要监听的事件的名称(submit,prevSubmit,error,validate,dataChange)| - | | errorState | number | 是 | 当前字段校验状态 0 未校验 1 校验通过 2 校验不通过 3 正在执行远程校验，校验结果尚未返回 | - | | errorMsg | string | 是 | 当前字段的错误信息 | - | | onChange | function(event,value) | 是 | 当前字段输入发生变化时触发，接受两个参数 event 事件对象 value 当前字段的值 | - |

Submit 参数描述 （指被submit修饰后返回的组件，新加的参数）

| 参数名 | 类型 | 是否必须 | 说明 | 默认值 | | --- | --- | ---- | --- | --- | | data | object | 是 | 当前表单的值 | {} | | isLoading | boolean | 是 | 当前表单是否在提交过程中 | false | | isPass | boolean | 是 | 当前表单是否已经全部校验通过 | false |

Blog:

• 2018年06月21日 11:12：lingtong 创建组件