cs-validation

    1.0.9 • Public • Published

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

    Keywords

    none

    Install

    npm i cs-validation

    DownloadsWeekly Downloads

    1

    Version

    1.0.9

    License

    MIT

    Last publish

    Collaborators

    • icerao
    • songhuaqian
    • shenqingling
    • cs_team