lm-form

v1.0.2

Published

3 years ago

* 作者：liuduan * 邮箱：[email protected] * 版本：**`1.0.2`**

Downloads

0High
0Medium
0Low

earth react reactcomponent form

form

作者：liuduan
邮箱：[email protected]
版本：1.0.2

介绍

表单组件，包含input、checkbox、radio、select、textarea、agreement、switch、validate、valiate.rule、autoclear

安装

lm-* 组件使用 npm 进行管理，命名空间统一为 lm-，请使用以下命令进行组件安装。

npm i lm-form --save

如果你还没有安装 npm，可通过以下方式进行安装。
安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

样例文档

用于input输入过程中校验

    // 只需调用Sumit组件，无需引用Validate
    // onClick提交表单，参数为校验值系列化对象
    // onError用于错误信息提示
    // disabled:默认true必须所有必填项填完才能改为false
    // input要使用InputValidate组件
    <Submit 
        onClick={this.onValidateSubmit.bind(this)} 
        onError={this.onValidateError.bind(this)} 
        disabled={disabled}>
        input 验 证 提 交
    </Submit>

    // valiate.type === 'submitValidate'用于区分input输入过程中校验还是sumit提交时校验，默认值为'inputValidate'
    <InputValidate
        label="姓名"
        name="inputvalidate1"
        type="text"
        placeholder="validate input"
        value={this.state.inputValidate1}
        onChange={(val) => this.handleInputValidateChange(val, 'inputValidate1')}
        validate={{
            rule: /^\d+$/,
            param: [],
            requireMsg: '该字段必填',
            errMsg: '请输入数字1',
            type: 'submitValidate'
        }}
        required
    />

validate-用于submit提交过程中校验

    // 使用高阶组件ValidateHoc获取校验属性
    ValidateHoc(App);
    // submit校验
    this.props.formValidate(validateArr)
            .then(query => {
                // query为提交表单插叙字符串
                console.log(query)
            })
            .catch(err => {
                // 可执行toast，err为错误message
                console.log(err)
            })
    // onBlur校验
    const { isValid, message } = this.props.inputValidate({ value, rule, param, required });
    /* 
		根据·isValid·判断input是否校验通过，包括 required && validate rule 校验，true 为通过，false 为不通过
		根据·message·返回信息 
			如果为 'required' 可执行toast提示改项为必须项，
			如果为 其他 可执行toast提示错误信息message
		*/

validateArr

    let validateArr = [
            {
                ref: this.inputRef,
                name: 'input',
                value: text,
                // rule: 可以为字符串、数组、正则，字符串或数组必须在rule.js中属性，数组意为检验符合多个规则
                rule: ['idNumber', 'idcardUnique'],
                //rule: /\d+/,
                param: [0, 2],
                err: 'textErr',
                required: true,
                errMsg: 'input错误',
                requireMsg: 'input必填'
            }, {
                name: 'checkbox',
                value: checkbox,
                required: true
            }
        ];

使用

最少配置参数为：

InputValidate组件（input输入过程中校验）

    <InputValidate
        type="text"
        placeholder="validate input"
        value={this.state.inputValidate}
        onChange={(val) => this.handleInputValidateChange(val, 'inputValidate')}
        validate={{
            rule: /^\d+$/, 
            param: [],
            requireMsg: '该字段必填',
            errMsg: '请输入数字'
        }}
        required
    />

Input组件(可控)使用

<Cell>
    <div className="lm-cell-label">Input</div>
    <CellBody>
        <Input
            ref={el => this.inputRef = el}
            type="text"
            value={this.state.text}
            err={this.state.textErr}
            onChange={val => this.handleInputchange(val, 'text')}
            onBlur={val => this.handlerBlur({ value: val, required: true })}
            placeholder="please input"
        />
    </CellBody>
    <CellFooter>元</CellFooter>
</Cell>

Input组件(非控)使用

<Cell>
    <div className="lm-cell-label">Smscode</div>
    <CellBody>
        <Input
            type="text"
            defaultValue="input"
            placeholder="please smscode"
        />
    </CellBody>
    <Smscode style={{ paddingTop: 0, paddingBottom: 0 }}>开启倒计时</Smscode>
</Cell>

Checkbox组件(可控)使用

<Checkboxgroup
    data={data}
    inline={false}
    name="checkbox"
    checked={this.state.checkbox}
    onChange={this.handleChange} />

Checkbox组件(非控)使用

<Cell>
    <div className="lm-cell-label">Checkbox</div>
    <CellBody>
        <Checkboxgroup data={data} defaultChecked={false} />
    </CellBody>
</Cell>

Redio组件(可控)使用

<Radiogroup
    data={data}
    inline={false}
    name="radio"
    checked={this.state.radio}
    onChange={this.handleChange} />

Redio组件(非控)使用

<Cell>
    <div className="lm-cell-label">Radio</div>
    <CellBody>
        <Radiogroup
            name="radio-inline"
            data={data}
            defaultChecked={false} />
    </CellBody>
</Cell>

Switch组件使用

<Switch
    label={'switch'}
    checked={this.state.switchinput}
    onChange={this.handleChange} />

Agreement组件使用

<Agreement
    label={'同意'}
    checked={this.state.agree}
    onChange={this.handleChange}>
    <a>《车分期征信查询授权书》</a>
    <a>《车分期征信查询授权书》</a>
    <a>《车分期征信查询授权书》</a>
    <a>《车分期征信查询授权书》</a>
</Agreement>

Select组件使用

<Cell>
    <div className="lm-cell-label">Select</div>
    <CellBody>
        <Select
            name="select"
            value={this.state.select}
            placeholder="选我"
            onChange={this.handleChange}
            data={data}
        />
    </CellBody>
    <CellFooter direction="down" />
</Cell>

Textarea组件使用

<Cell>
    <Textarea
        name="textarea"
        value={this.state.textarea}
        onChange={this.handleTextareaChange}
        maxLength={50} />
</Cell>

Input配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | className | string | undefined | 自定义类名 | | placeholder | string | '请输入' | 提示信息 | | defaultValue | string | '' | 默认值，用于非控制input | | value | string || number | '' | 值，配合onChange使用 | | type | string | 'text' | input类型 | | err | bool | false | 判断输入是否符合错误，错误：true，正确：false | | onChange | function | 'onChange(){} | onchange事件回调 | | onFocus | function | onFocus(){} | onfocus事件回调 | | onBlur | function | 'onBlur(){} | onblur事件回调 | | refName | string | 'inputRef' | 原生ref属性值，可通过container中的ref.inputRef获取原生input的ref | | maxLength | number | - | 长度限制 | | useClear | bool | true | true：使用自动清除，false：不使用 |

其他input支持属性Input组件都可支持

InputVaidate配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | hintClassName | string | undefined | 自定义类名 | | validate | object | {} | 验证参数对象 | | required | bool | false | 是否必填 | | onChange | function | () => {} | 回调 | | onFocus | function | () => {} | 回到 | | onBlur | function | () => {} | 回调 | | label | string | `` | 左侧label文案非必填 |

其他Input支持属性InputValidate组件都可支持

其他input支持属性Input组件都可支持

Checkbox/Radio/Switch/Agreement配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | className | string | undefined | 自定义类名 | | inline | bool | true | 多个checkbox是否在一行显示 | | defaultChecked | bool | undefined | 默认是否选中，用于非控制checkbox | | checked | bool | undefined | 是否选中，配合onChange使用 | | label | string | number | element | '' | label | | disabled | bool | false | 禁用 | | onChange | function | 'onChange(){} | onchange事件回调 |

Checkboxgroup配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | data | array isRequired | [] | 数据 | | checked | array | undefinde | 多选选中value值数组 | | disabled | bool | false | 禁用，如果disabled不同，可用过data属性传入 | | name | string | '' | checkbox name，如果name不同，可用过data属性传入name |

Radiogroup配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | data | array isRequired | [] | 数据 | | checked | any | undefinde | 单选选中value值 | | disabled | bool | false | 禁用，如果disabled不同，可用过data属性传入 |## Checkboxgroup配置参数

其他Checkbox支持属性Checkboxgroup组件都可支持，其中label、value属性必须在data中传入
其他Radio支持属性Radiogroup组件都可支持，其中label、value属性必须在data中传入
data 格式, 属性名不能更改

const data = [
    { value: 0, label: 'Ph.D.' },
    { value: 1, label: 'Bachelor' },
    { value: 2, label: 'College', name: 'a', disabled: false }
]

Textarea配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | className | string | undefined | 自定义类名 | | placeholder | string | '请输入' | 提示信息 | | defaultValue | string | '' | 默认值，用于非控制input | | value | string || number | undefined | 值，配合onChange使用 | | err | bool | false | 判断输入是否符合错误，错误：true，正确：false | | maxLength | number | 50 | 最大输入字数 | | showCounter | bool | true | 是否显示字数提示，默认显示 | | onChange | function | onChange(){} | onchange事件回调 | | onFocus | function | onFocus(){} | onfocus事件回调 | | onBlur | function | onBlur(){} | onblur事件回调 | | useClear | bool | true | true：使用自动清除，false：不使用 |

其他textarea支持属性Textarea组件都可支持

Select单选配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | className | string | undefined | 自定义类名 | | placeholder | string | '请输入' | 提示信息 | | value | string || number | '' | 选中值 | | data | array | [] | 渲染option用数据，若不传可自定义children 作为option | | disabled | bool | false | 禁用，如果disabled不同，可用过data属性传入 | | onChange | function | 'onChange(){} | onchange事件回调 |

其他select支持属性Select组件都可支持，但只支持单选，不支持多选
data 格式

Submit配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | className | string | undefined | 自定义类名 | | style | object | undefinde | 自定义样式 | | type | string | '' | button-type | | disabled | book | true | 必须在所有必填项有之后才可解除禁用 | | onClick | function | onClick(){} | 提交表单回调，参数为验证表单序列化对象 | | onError | function | 'onError(){} | 错误信息事件回调，参数为错误信息 |

const data = [
    { value: 0, label: 'Ph.D.' },
    { value: 1, label: 'Bachelor' },
    { value: 2, label: 'College', disabled: false }
]

validate.rule 校验规则

| Prop | Type | Default | Description | Message | | ---- |:----:|:-------:| :----------:| :----------:| | password | string | - | 密码校验 | 请填写${param[0]}-${param[1]}位字母、数字 | | equal | string | - | 两次输入是否一致校验 | 两次输入${param[1]}不一致备注：param[0]为同value比较的值 | | age | string | - | 年龄校验 | 对不起，您的年龄不符合准入要求 | | idNumber | string | - | 身份证号校验 | 请填写正确的身份证号 | | digital | string | - | 大于0数字，两个小数点 | 请填写大于0数字(如：8.25) | 请填写${param[0]}-${param[1]}的整数 | | intRange | string | - | 整数范围 | 请填写${param[0]}-${param[1]}的整数 | | digitalRange | string | - | 金额数字范围 | 还款金额请填写${param[0]}-${param[1]}的数字 | | number | string | - | 正整数-位数范围校验 | 请填写${param[0]}-${param[1]}位正整数 | | inviteCode | string | - | 邀请码数字范围校验 | 请填写${param[0]}-${param[1]}位数字 | | name | string | - | 姓名校验，不带'·' | 请填写${param[0]}-${param[1]}个中文 | | nameAddDot | string | - | 姓名校验，带'·' | 请填写${param[0]}-${param[1]}个中文 | | areacode | string | - | 区号校验 | 请填写正确的区号 | | telephone | string | - | 固定电话校验 | 请填写正确的区号 或 请填写正确的固话备注：param[0] 为区号 | | mobilephone | string | - | 手机号码校验 | 请填写正确的手机号 | | length | string | - | 字符长度校验 | 请填写${param[0]}-${param[1]}个字符 | | bankCard | string | - | 银行卡检验，允许0开头 | 请填写正确的银行卡号 | | creditCard | string | - | 信用卡号校验 | 请填写正确的信用卡号 | | consistency | string | - | 两个值不能相同校验 | ${param[1]}与${param[2]}不能相同备注：param[0]为同value比较的值 | | idcardUnique | string | - | 通过后台同步请求验证身份证号是否被注册过 | 该身份证号已注册！ | | lt | string | - | 可用余额校验 | 可用余额${param[0]}<${param[1]}，暂不能提现！ | | digitalRangeTwo | string | - | 数字范围，提示数字单位为万 | 请填写${param[0]}万-${param[1]}万的数字 | | imageCode | string | - | 图形验证码校验 | 请填写${param[0]}位图形验证码 | | smsCode | string | - | 短信验证码校验 | 请填写${param[0]}位短信验证码 | | income | string | - | 月收入校验，特殊处理 | 收入金额过小或格式错误(最多两位小数) | | VIN | string | - | 车架号校验 | 请填写正确的车架号 | | carPlateNumber | string | - | 车牌号校验 | 请输入正确的车牌号 | | dateNum | string | - | 无链接符日期校验 | 请填写${param[0]}-${param[1]}位数字 | | limitDigital | string | - | 车辆成交价校验 | 请填写${param[0]}元-${param[1]}元的数字 | | email | string | - | 邮箱校验 | 请填写正确的邮箱格式 |

校验参数param类型为array

注意事项

组件注意事项

自定义校验规则可通过，ValidateHoc(App, rule) 第二个参数rule传入，rule类型为对象，书写规范参考validate.rule.js。

validate.rule.js 内部已定义部分检验规则。

若想直接通过正则表达式校验，可在 this.props.formValidate(validateArr) 调用的 validateArr 中，rule直接赋值正则表达式。

校验函数示例

    // 整数范围
    intRange: (value, param) => ({
        validator: new RegExp('^[1-9]\\d*$', 'g').test(value) && (parseInt(value) >= param[0]) && (parseInt(value) <= param[1]),
        message: `请填写${param[0]}-${param[1]}的整数`
    }),

开发调试

进入项目目录后，使用 node 命令启动服务

npm run start

打包发布可通过 node 命令执行

npm run build
npm publish

Changelog

0.1.0

init

0.1.1

更新input样式

0.1.2

validate bugfix

0.1.3

validata 增加errMsg、requireMsg属性，区分错误提示信息

0.1.4

修复Input、Textarea组件readOnly时会显示autoClear的bug
增加input readonly、disabled显示样式

0.1.5

修复Input type为number类型时maxLength属性失效问题
修复Input 样式bug
修改Input、Textarea readOnly状态样式

0.1.6

增加validate.rule readme
Input readme增加maxLength属性
Input 增加refName属性，用于获取原生input
validate.rule增加 mobilephone 手机号校验
validate errMsg支持array类型，用于多个rule时，不同校验规则下的错误提示信息。若errMsg为string类型，只能提示一个错误提示信息

0.1.7

姓名校验增加自动去空格功能
表单序列化时增加字符串类型自动去掉两端空格功能
validate.rule对param进行容错处理

0.1.8

input placehoder err时增加颜色显示
select、input[type=number]增加兼容火狐浏览器样式处理

0.1.9

修复了validate中校验逻辑中的bug
增加了InputValidate、TextareaValidate、Form组件，用于input输入中校验场景

0.2.0

去掉了Form组件
增加了Submit组件，代替之前Form组件
增加了InputValidate的通用性，适用于input输入过程中校验和只在submit阶段校验两种业务场景，通过validate属性的type属性区分，type为'submitValidate'则只在提交时校验，type默认为input输入时校验。

0.2.1

修复了Autoclear组件pc端bug
校验规则中增加了dateNum、email、limitDigital校验规则

0.2.3

修改Autoclear显示样式

0.2.4

增加Autoclear是否显示属性useClear
修复Input value undefined值时报错问题
修复Input number 类型可输入e问题
修正无连接符日期dateNum校验规则

0.2.5

修改checkinput组件中label的属性类型为字符串或数字或dom元素

0.2.6

增加电话号码号段校验

0.2.7

校验年龄bug修复

0.2.8

移除includes方法
修复input type number bug

0.2.9

修改日期校验规则

0.2.10

修改车架号校验规则

0.3.0

升级至react-16版本

0.3.2

修复input、textarea 组件卸载时setState bug

0.3.3

修复input、textarea onBlur时x号一直显示bug
validate.js rule 兼容function

0.3.4

bugfix for validate.js rule

0.3.5

setTimeout add clearTimeout

0.3.6

升级ui

0.3.7

agreement组件bugfix

0.3.8

agreement组件bugfix，增加uuid

0.3.9

修改姓名校验规则

0.3.11

select bugfix

0.3.12

optimize animation

0.3.13

input and lm-cell-label style bugfix

1.0.0

modify css because new ui standard

1.0.1

modify checkbox and agreement css

1.0.2

upgrade dependency lm-cell version