[TOC]

cs-validation

表单验证组件

• cs-validation
  • 1. 支持的表单验证组件
  • 2. 简单用例
  • 3. API
    • 3.1 Form
    • 3.2 Input
    • 3.3 InputGroup
    • 3.4 Button
    • 3.5 Checkbox
    • 3.6 Radio
    • 3.7 Select
    • 3.8 Select2
    • 3.9 Textarea

1. 支持的表单验证组件

1. Form
2. Input
3. InputGroup
4. Button
5. Checkbox
6. Radio
7. Select
8. Select2
9. 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	数据

** 说明：**

1. 当有属性formGroup时：datas是数组

datas = [{
      label: 'Check me out1',
      value: 'checkone',
      defaultChecked: true
},...];

1. 当无属性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显示内容