react-easyform
A Higher Order Component to build form &input, support validators.
一个 React 高阶组件(HOC),用来方便的创建表单,支持各类表单验证,支持异步验证。
react-formutil
react-easyform 已经停止维护,请切换到
功能特色 & Features
- 使用简便,具有详细的表单校验辅助 html 类名(classname)显示
- 支持单选组、复选组表单
- 支持表单嵌套、组合
- 支持多种表单验证规则,自定义验证信息显示
- 支持异步验证
- 通过内置的表单 easyFieldwrapper 包装器,可以自由定义表单输入项,以支持 easyform
预览
安装 & Installation
npm install --save react-easyform
开始使用 & Getting started
- 登录表单示例
;; { ; }; { // 经过EasyForm包装的组件,props里会有一个params属性,包含所有的表单项值 const params = thispropsparams; /* * props里的easyform对象,包含了一组验证结果, * 其中$invalid/$valid 可以用来判断表单项是够已经正确填写 */ const $invalid = thispropseasyform$invalid; return <form className="" onSubmit=thissubmit> <Field type="text" name="username" required pattern=/^\w510$/ validMessage= required: '请填写用户名' pattern: '用户名不能包含字母数字下划线以外的字符' /> <Field type="text" name="password" required validMessage= required: '请填写密码' /> <button className="btn-submit" disabled=$invalid ? 'disabled' : false> 提交 </button> </form> ; } Form;
- 单选、复选、下拉等示例
;; { ; }; { // 经过EasyForm包装的组件,props里会有一个params属性,包含所有的表单项值 const params = thispropsparams; /* * props里的easyform对象,包含了一组验证结果, * 其中$invalid/$valid 可以用来判断表单项是够已经正确填写 */ const $invalid = thispropseasyform$invalid; return <form className="" onSubmit=thissubmit> <div>性别</div> <FieldGroup type="radio" name="sex" required validMessage= required: '请选择性别' > <Field label="男" value="0" /> <Field label="女" value="1" /> </FieldGroup> <FieldGroup type="checkbox" name="hobbies" required minLength="2" validMessage= required: '请选择你的爱好' minLength: '至少选择两个爱好' > <Field label="篮球" value="0" /> <Field label="足球" value="1" /> <Field label="乒乓球" value="2" /> <Field label="羽毛球" value="3" /> </FieldGroup> <button className="btn-submit" disabled=$invalid ? 'disabled' : false> 提交 </button> </form> ; } Form;
文档 API & Documention
-
### EasyForm {Function}
高阶组件包装器,你的表单组件需要使用该方法包装后返回。
/*** EasyForm** @param* @param* 0: 关闭* 1: focus时显示* 2: dirty有改动时显示* 3: 总是显示* @return*/Component{return <div />;}//导出时需要使用 EasyForm 包装下MyFormContainer 1;返回的高阶组件,props 里会被注入两个属性:
easyform
EasyForm 的表单实例,保存了验证结果、表单项值、每个表单项的引用等params
一个快捷访问表单参数的对象(easyform 对象下也有该值)
-
### Field {High Order React-Component}
表单项高阶组件,支持 React 对 form 输入项节点的所有属性,例如
defaultValue
type
onChange
等;也支持各种事件绑定。请选择女男有几点需要注意:
- 如果是单选或者复选,label 必须通过属性
label
传入 - 如果有默认值,要使用
defaultValue
传入,如果使用value
也会导致组件成为一个受限组件(controlled components) - 下拉框,也要通过 Field 高阶组件创建,指定
type="select"
即可 - textarea,同样,指定
type="textarea"
即可
使用 Field 生成的节点,会包含一组 easyform 验证结果 classname:
上面即为生成的节点结构,其中 input 父级容器会包含默认的
form-group
classname,以及你通过Field
传入的 classname。input 节点上会包含一个固定的form-control
classname,以及一组其他的值:ef-dirty
ef-touched
ef-invalid
ef-valid
ef-focusing
ef-error-required
ef-error-pattern
ef-error-minLength
- ... more
具体可以参看示例 demo
- 如果是单选或者复选,label 必须通过属性
-
### FieldGroup {High Order React-Component}
表单项组,暂时只支持 单选和复选。
性别爱好其中 type 和 name 值必须传入。type 只能为
radio
和checkbox
。 -
### 表单校验 & Validators
暂时支持以下几种校验:
- required
- pattern
{RegExp | Function}
可以是正则或者一个函数,返回 bool。通过传入函数可以实现各种复杂校验需求 - confirm 一致性检测,例如二次密码确认。值为其他表单项的引用,例如
confirm={this.refs.password}
- minLength 支持
FieldGroup
- maxLength 支持
FieldGroup
- min
- max
异步校验
- asyncValidator 函数返回 promise
开发 & develop
$ git clone git@github.com:qiqiboy/react-easyform.git
$ cd react-easyform/
$ npm install
$ npm start