## Validator组件

原理说明：
`Validator`会遍历其所有层级的带有`data-patterns`属性的表单子元素，通过HOC的方式将其变得可校验化

### Validator属性
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| checkers | 自定义校验模式函数 | `object` | `{}` |
| onValid | 当Validator下所有表单元素校验通过时，触发的回调 | `function` | `function() {}` |
| onInValid | 当Validator下存在一个表单元素校验不通过时，触发的回调 | `function` | `function() {}` |
| msgAlign | 默认提示信息的位置 | `bottom`或者`right` | `right` |

### 表单元素校验属性
| 属性 | 说明 | 类型 | 默认值 |
| :--- | :--- | :--- | :--- |
| data-patterns | 校验模式，详见说明 | `array` | `undefined` |
| data-trigger | 校验时机，传入组件支持的事件prop | `string|array` | `['onChange', 'onBlur']` |
| data-checking | 传入false关闭校验 | `bool` | `undefined` |
| data-required | 表单是否必填 | `bool` | `undefined` |
| data-required-msg | 自定义必填时提示文案 | `string` | `undefined` |
| data-tips | 默认提示文案，info类型 | `string` | `undefined` |
| data-placer | 表单校验结果的回调，当此属性存在时，表单校验信息默认不展示 | `function` | `undefined` |
| data-prefix | 表单校验化后，会被im-validator-enhancer包裹，可在表单前增加前缀元素 | `React Element` | `undefined` |
| data-suffix | 表单校验化后，会被im-validator-enhancer包裹，可在表单后增加后缀元素 | `React Element` | `undefined` |

### Validator提供的API如下
| 方法 | 说明 | 类型 |
| :--- | :--- | :--- |
| checkField(val, name) | 手动触发某一表单元素的校验，当val为undefined时，Validator会尝试取得表单的当前值 | Function(val: `any`, name: `string`): `undefined` |
| scrollToErrorField(idx, offset) | 滚动到第`idx`个错误的表单元素**(目前不支持offset参数)** | Function(idx: `number`, offset: `number`): `bool` |
| isAllValid | 获取当前Validator下所有表单的是否全部通过校验 | Function(): `bool` |
| isFieldValid(name) | 获取当前Validator下某个表单的校验值 | Function(): `null|bool` |
| resetField(name) | 重置当前Validator下某个表单的校验状态 | Function(): `undefined` |

注意：
1. 需要校验的表单元素必须带有`name`属性
2. Validator会重置表单的`onChange`, `ref`属性，重置前的属性依然有效，除了`ref`属性为`string`的情况
3. 被HOC封装后的表单元素，会在`componentDidMount`钩子中计算初始的有效值(`isValid`)，需要表单元素为非无状态组件且存在`getValue`方法，如果不支持，将会以`undefined`值传入校验模式中得出的结果为准
4. 表单元素的`data-patterns`属性支持内置的模式，详见checker.js源码

#### checkers属性使用示例
```js
{
  courseName: function(val, callback) {
    $.ajax({
      ...
    }).done(function(data) {
      callback({
        isValid: data.isValid,
        msgs: data.msgs
      });
    });
  }
}
```

#### data-patterns使用示例
```
[{
  key: 'courseName',
  msg: '课程名称格式不正确'
}, {
  key: 'limit',
  msg: '1-10字'
  min: 1,
  max: 10
}, ...]
```

#### data-placer函数的参数对象
| 属性 | 说明 | 类型 |
| :--- | :--- | :--- |
| isValid | 表单校验结果 | `bool` |
| msgs | 表单校验的所有提示信息数组 | `function` |
| msgEl | 原本应该显示的Msg元素 | `React Element` |
| $field | 触发校验的表单DOM元素 | `DOM Node` |