import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Form from '../../src';
import FormControl from 'bee-form-control';
import Label from 'bee-label';
import Button from 'bee-button';
const FormItem = Form.FormItem;
class Demo2 extends Component {
submit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (err) {
console.log('校验失败', values);
} else {
console.log('提交成功', values)
render() {
const { getFieldProps, getFieldError } = this.props.form;
return (
{getFieldError('username')}
{getFieldError('password')}
export default Form.createForm()(Demo2);
基于
rc-form
。
使用注意，写在最前面
同一个表单中，表单元素不能设置相同的name
使用
getFieldProps
后，不能使用 ref 。 可以使用
this.props.form.getFieldInstance('ref')
getFieldProps
配置受控表单元素，经过此方法包装的表单元素才可以使用
this.props.form
中的其它方法，此表单元素需要有
onChange
方法，并且
onChange
回调的第一个值为此表单元素当前值
getFieldDecorator
类似
getFieldProps
getFieldsValue([fieldNames: String[]])
根据
name
获取多个表单元素的值
getFieldValue(fieldName: String)
根据
name
获取单个表单元素的值
getFieldInstance(fieldName: String)
根据
name
获取表单元素
setFieldsValue(obj: Object)
根据
name
设置多个表单元素的值
setFieldsInitialValue(obj: Object)
根据
name
设置多个表单元素的默认值
setFields(obj: Object)
根据
name
设置多个表单元素的属性
validateFields([fieldNames: String[]], [options: Object], callback: (errors, values) => void)
校验表单。options.force(bool):是否校验已经校验过的字段;
getFieldsError(names)
获取多个表单元素的错误信息
getFieldError(name)
获取单个表单元素的错误信息
isFieldValidating(name: String)
单个表单元素是否正在校验
isFieldsValidating(names: String[])
多个表单元素是否正在校验
isFieldTouched(names: String[])
单个表单元素的值是否已经被用户更改
isFieldsValidating(names: String[])
多个表单元素的值是否已经被用户更改
resetFields([names: String[]])
isSubmitting()
表单是否正在提交
submit(callback: Function)
表单正在提交返回true，callback执行后返回false
getFieldDecorator(name:String, option: Object) => (React.Node) => React.Node
与
getFieldProps
作用类似。 例如
{getFieldDecorator('name', otherOptions)(<FormControl />)}
</Form>
rules 常用
参考
async-validator
内建校验类型(string字符串/number数字/boolean布尔/method函数/integer整数/float带小数点的数字/array数组[使用Array.isArray判断]/object对象且不是array/enum枚举/date日期/url链接/email邮箱)，
string
'string'
pattern
正则表达式校验
RegExp
min/max
使用min和max属性定义范围。对于字符串和数组类型与长度进行比较，对于数字类型，数字不能小于min也不能大于max
若要验证字段的确切长度，请指定len属性。对于长度属性执行字符串和数组类型比较，对于数字类型，此属性指示数字的精确匹配，即，它只能严格等于len。如果len属性与min和max范围属性组合，len优先。
值为枚举类型中的一个。 例如：
rules:[{type: "enum", enum: ['admin', 'user', 'guest']}]
transform
校验前转换字段值
function(value) => transformedValue:any
validator
自定义校验（注意，callback 必须被调用）
function(rule, value, callback)
whitespace
通常将仅包含空格的所需字段视为错误。若要为仅由空格组成的字符串添加额外的测试，值设置为true的规则添加空格属性。规则必须是字符串类型。
boolean
false
fields
如果需要验证深对象属性，可以通过向规则的字段属性分配嵌套规则来验证对象或数组类型的验证规则。
Object
$ npm install -g bee-tools
$ git clone https://github.com/tinper-bee/bee-form
$ cd bee-form
$ npm install
