Components
AlertAlignButtonCheckboxCheckbox GroupConfirmDatepickerDialogDropdownFormIconInputMenuMessageMonthpickerPagePickerPopconfirmRadioStatusboxTabTableUploadValidatorValidator Props & MethodsBasic UsagemsgAlignonValid / onInValidValidator APIsPrefix / Suffix默认提示:data-tips自定义必填提示:data-required-msg自定义提示信息位置: data-placer自定义校验时机: data-triggerCheck On / Off
Validator
Validator会遍历其所有层级的带有data-patterns属性的表单子元素,通过HOC的方式将其变得可校验化
表单元素校验属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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 APIs
| 方法 | 说明 | 类型 |
|---|---|---|
| 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 |
| resetField(name) | 重置当前Validator下某个表单的校验状态 | Function(): undefined |
Validator Props & Methods
status
'success' │ 'error' │ 'info'
null
msgs
array
[]
Basic Usage
msgAlign
onValid / onInValid
Validator APIs
enhancer
Prefix / Suffix
I am a prefix I am a suffix
默认提示:data-tips
默认提示
自定义必填提示:data-required-msg
自定义提示信息位置: data-placer
自定义校验时机: data-trigger
Check On / Off
The check is on