[TOC]
cs-validation
表单验证组件
1. 支持的表单验证组件
- Form
- Input
- InputGroup
- Button
- Checkbox
- Radio
- Select
- Select2
- Textarea
备注: 以上所有组件(除了Form、Button)具有3种对应样式
- 基础组件
<Input rule="taskName" value="默认任务名" /> --> <input class="form-control" name="taskName" value="默认任务名">
- 组合表单组件
formGroup
<Input rule="taskName2" label="任务名" value="默认任务名" formGroup/> --> <div class="form-group"> <label for="taskName2">任务名</label> <input class="form-control" name="taskName2" value="默认任务名"> </div>
- 组合表单组件(隐藏label)
formGroup labelHide
<Input rule="taskName3" label="任务名" value="默认任务名" formGroup labelHide/> --> <div class="form-group"> <label class="sr-only" for="taskName3">任务名</label> <input class="form-control" name="taskName3" value="默认任务名"> </div>
2. 简单用例
// 验证规则配置
const config = {
// 验证规则
"rules": {
"taskName": {
"minlength": 2,
"maxlength": 10,
}
},
// 验证错误提示信息
"messages": {
"taskName": {
"required": "taskName不能为空",
"minlength": "taskName至少{0}个字符",
"maxlength": "taskName最多{0}个字符",
}
}
};
<Form config={config}>
<Input rule="taskName" label="任务名" value="默认任务名" formGroup required/>
</Form>
3. API
3.1 Form
属性 | 作用 |
---|---|
config | 初始化表单验证 |
disabled | 将整个表单disabeld |
** 说明: ** 在整个表单disabeled的情况下,将单个组件属性设为 enabled 即可激活
3.2 Input
属性 | 作用 |
---|---|
required | 必填 |
rule | 验证规则的key |
label | 组合表单组件时需要,label显示内容 |
value | 默认值 |
3.3 InputGroup
属性 | 作用 |
---|---|
required | 必填 |
rule | 验证规则的key |
label | 组合表单组件时需要,label显示内容 |
value | 默认值 |
pre | 前缀内容 |
end | 后缀内容 |
3.4 Button
属性 | 作用 |
---|---|
label | button显示内容 |
3.5 Checkbox
属性 | 作用 |
---|---|
required | 必填 |
rule | 验证规则的key |
label | 组合表单组件时需要,label显示内容 |
datas | 数据 |
** 说明:**
- 当有属性formGroup时:datas是数组
datas = [{ label: 'Check me out1', value: 'checkone', defaultChecked: true },...];
- 当无属性formGroup时:datas是对象
datas = { label: 'Check me out1', value: 'checkone', defaultChecked: true };
3.6 Radio
属性 | 作用 |
---|---|
rule | 验证规则的key |
label | 组合表单组件时需要,label显示内容 |
datas | 数据 |
** 说明:同 Checkbox **
3.7 Select
属性 | 作用 |
---|---|
required | 必填 |
rule | 验证规则的key |
label | 组合表单组件时需要,label显示内容 |
datas | 数据 |
** 说明:**
datas是数组
datas = [{ label: '请选择', value: '', selected: true, hide: true },{ label: 'project1', value: 'project1', selected: true, },...];
3.8 Select2
属性 | 作用 |
---|---|
required | 必填 |
multiple | 多选 |
rule | 验证规则的key |
label | 组合表单组件时需要,label显示内容 |
datas | 数据 |
** 说明:同 Select, 但是没有 hide
属性 **
3.9 Textarea
属性 | 作用 |
---|---|
required | 必填 |
rule | 验证规则的key |
label | 组合表单组件时需要,label显示内容 |