Nanobots Producing Megastructures

    lm-form

    1.0.2 • Public • Published

    form

    • 作者:liuduan
    • 邮箱:liuduan.05.05@163.com
    • 版本: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属性传入
    • 其他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)
    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

    1. init

    0.1.1

    1. 更新input样式

    0.1.2

    1. validate bugfix

    0.1.3

    1. validata 增加errMsgrequireMsg属性,区分错误提示信息

    0.1.4

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

    0.1.5

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

    0.1.6

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

    0.1.7

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

    0.1.8

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

    0.1.9

    1. 修复了validate中校验逻辑中的bug
    2. 增加了InputValidateTextareaValidateForm组件,用于input输入中校验场景

    0.2.0

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

    0.2.1

    1. 修复了Autoclear组件pc端bug
    2. 校验规则中增加了dateNumemaillimitDigital校验规则

    0.2.3

    1. 修改Autoclear显示样式

    0.2.4

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

    0.2.5

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

    0.2.6

    1. 增加电话号码号段校验

    0.2.7

    1. 校验年龄bug修复

    0.2.8

    1. 移除includes方法
    2. 修复input type number bug

    0.2.9

    1. 修改日期校验规则

    0.2.10

    1. 修改车架号校验规则

    0.3.0

    1. 升级至react-16版本

    0.3.2

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

    0.3.3

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

    0.3.4

    1. bugfix for validate.js rule

    0.3.5

    1. setTimeout add clearTimeout

    0.3.6

    1. 升级ui

    0.3.7

    1. agreement组件bugfix

    0.3.8

    1. agreement组件bugfix,增加uuid

    0.3.9

    1. 修改姓名校验规则

    0.3.11

    1. select bugfix

    0.3.12

    1. optimize animation

    0.3.13

    1. input and lm-cell-label style bugfix

    1.0.0

    1. modify css because new ui standard

    1.0.1

    1. modify checkbox and agreement css

    1.0.2

    1. upgrade dependency lm-cell version

    Install

    npm i lm-form

    DownloadsWeekly Downloads

    13

    Version

    1.0.2

    License

    none

    Unpacked Size

    220 kB

    Total Files

    47

    Last publish

    Collaborators

    • davidfeng
    • jfhu
    • sherry.cao
    • tony-liuduan