tr-validate-form v1.0.0

创建可验证组件

• 通过createValidateComponent方法来创建一个可验证的组件，可以传入validator来完成单独验证

import * as React from 'react'props
import { createValidateComponent } from 'src/core'

class InputComponent extends React.Component<any, undefined> {
    render() {
        let props = this.props
        return (
            <div className="input">
                <input type="text" {...props} />
            </div>
        )
    }
}

export default createValidateComponent()(InputComponent)

创建需要验证的表单

• 通过createValidateForm来创建可验证表单，需要传入验证条件，如果无验证条件则无法验证
• 可验证组件需要设置condtion属性，如果没有，则不验证，condtion对应验证条件的key
• 可验证组件可以设置vid属性，但在一个表单内必须是唯一
• validator通过vid可以获取组件验证状态、设置组件condition或者手动赋予验证结果

import * as React from 'react'
import { createValidateForm, IValidateFormProps, TestConstant, TriggerConstant } from 'src/core'
import Input from './input'
const conditions = {
    text: {
        trigger: [TriggerConstant.FOCUS, TriggerConstant.CHANGE],
        rules: [{ test: TestConstant.REQUIRED, message: '文本不能为空' }]
    },
    number: {
        trigger: [TriggerConstant.BLUR, TriggerConstant.CHANGE],
        rules: [{ test: TestConstant.REQUIRED, message: '数值不能为空' }, { test: TestConstant.NUMBER, message: '数值不合法' }]
    }
}
class Form extends React.Component<IValidateFormProps, any> {
    state = {
        text: '',
        number: ''
    }
    render() {
        let { validator } = this.props
        let { text, number } = this.state
        return (
            <div className="form">
                <div className="form-inline">
                    <label>文本</label>
                    <Input condition="text" value={text} onChange={e => this.setState({ text: e.target.value })}/>
                </div>
                <div className="form-inline">
                    <label>数值</label>
                    <Input condition="number" value={number} onChange={e => this.setState({ number: e.target.value })} />
                </div>
                <div className="form-inline offset">
                    <button type="button" onClick={this.props.submit}>
                        验证
                    </button>
                    <button type="button" onClick={this.props.reset}>
                        重置
                    </button>
                </div>
            </div>
        )
    }
}

export default createValidateForm(conditions)(Form)

后话

验证类型还在不断完善，部分功能开发中...