[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
},...];

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