lm-form v1.0.2
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属性传入 | ## 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、inputtype=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
4 years ago
4 years ago
4 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago