cs-validation
验证组件
Last updated 2 years ago by cs_team .
MIT · Original npm · Tarball · package.json
$ cnpm install cs-validation 
SYNC missed versions from official npm registry.

[TOC]

cs-validation

表单验证组件

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显示内容

Current Tags

  • 1.0.9                                ...           latest (2 years ago)

10 Versions

  • 1.0.9                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Downloads
Today 0
This Week 0
This Month 21
Last Day 0
Last Week 0
Last Month 32
Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |