cs-validation v1.0.9

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

说明： 在整个表单disabeled的情况下，将单个组件属性设为 enabled 即可激活

3.2 Input

3.3 InputGroup

3.4 Button

3.5 Checkbox

说明：

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

说明：同 Checkbox

3.7 Select

说明：

datas是数组

datas = [{
    label: '请选择',
	  value: '',
	  selected: true,
	  hide: true
},{
    label: 'project1',
	  value: 'project1',
	  selected: true,
},...];

3.8 Select2

说明：同 Select, 但是没有 hide 属性

3.9 Textarea