# 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`，可通过以下方式进行 [安装](https://nodejs.org/en/download/)。 - 安装cnpm `npm install -g cnpm --registry=https://registry.npm.taobao.org` --- ## 使用 ### 样例文档 - 用于input输入过程中校验 ```javascript // 只需调用Sumit组件，无需引用Validate // onClick提交表单，参数为校验值系列化对象 // onError用于错误信息提示 // disabled:默认true必须所有必填项填完才能改为false // input要使用InputValidate组件 input 验 证 提 交 // valiate.type === 'submitValidate'用于区分input输入过程中校验还是sumit提交时校验，默认值为'inputValidate' this.handleInputValidateChange(val, 'inputValidate1')} validate={{ rule: /^\d+$/, param: [], requireMsg: '该字段必填', errMsg: '请输入数字1', type: 'submitValidate' }} required /> ``` - `validate`-用于submit提交过程中校验 ```javascript // 使用高阶组件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` ```javascript 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输入过程中校验） ```javascript this.handleInputValidateChange(val, 'inputValidate')} validate={{ rule: /^\d+$/, param: [], requireMsg: '该字段必填', errMsg: '请输入数字' }} required /> ``` - `Input`组件(可控)使用 ```javascript
Input
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" /> 元 ``` - `Input`组件(非控)使用 ```javascript
Smscode
开启倒计时 ``` - `Checkbox`组件(可控)使用 ```javascript ``` - `Checkbox`组件(非控)使用 ```javascript
Checkbox
 ``` - `Redio`组件(可控)使用 ```javascript ``` - `Redio`组件(非控)使用 ```javascript
Radio
 ``` - `Switch`组件使用 ```javascript ``` - `Agreement`组件使用 ```javascript 《车分期征信查询授权书》 《车分期征信查询授权书》 《车分期征信查询授权书》 《车分期征信查询授权书》 ``` - `Select`组件使用 ```javascript
Select