react-fast-form

React form validation,simple and free!

目前为不稳定版本，非 fast-flow 维护者请勿在公司项目中使用。

🔗 Live demo
🕐 Releases

🌀 Example 🌀 Doc 🌀 Test

📦 Install

npm i react-fast-form --save

📄 Usage

基础

<div id="demo"></div>

var Form = require('react-fast-form')
var React = require('react')
var ReactDOM = require('react-dom')
var App = React.createClass({
    componentWillMount: function () {
        this.form = new Form(this)
    },
    getInitialState: function () {
        return {value: ''}
    },
    onSubmit: function (e) {
        // checkAll 默认触发 onBlur 校验
        this.form.checkAll(function (error, errorArray) {
            console.log(arguments)
        })
        e.preventDefault()
    },
    onChange: function (e) {
        this.setState({value: e.target.value})
        // 手动触发 onChange 时校验
        this.form.triggerCheck('user', 'findNumber')
    },
    render: function () {
        let self = this
        let check = this.form.check
        let checkError = this.form.checkError
        return (
            <div >
                <input type="text"
                {...check({
                    // 代理 props 开始  ----------->
                    value: self.state.value,
                    onChange: self.onChange,
                    onBlur: function() {},
                    onFocus: function() {},
                    ref: 'user',
                    // 代理 props 结束  ----------->
                    action: {
                        findNumber: function (callback) {
                            var value = self.state.value
                            if (/\d/.test(value)) {
                                callback('change: 用户名中不允许有数字');return
                            }
                            callback();return
                        },
                        onBlur: function (callback) {
                            // 模拟 异步
                            setTimeout(function (){
                                var value = self.state.value
                                if(!/\S/.test(value)) {
                                    callback('blur: 用户名必填');return
                                }
                                if(value.length < 5) {
                                    callback('blur: 用户名长度至少为5');return
                                }
                                if (/\d/.test(value)) {
                                    callback('blur: 用户名中不允许有数字');return
                                }
                                callback();return
                            }, 500)
                        }
                        // onChange 的校验请在 self.onChange 中手动触发
                    }
                })}
                 />
                <button type="button" onClick={this.onSubmit} >Submit</button>
                {
                    checkError('user')?checkError('user').msg:null
                }
            </div>
        )
    }
})

ReactDOM.render(<App />, document.getElementById('demo'))

triggerCheck(ref, actionName) 手动触发校验

🔨 development

npm i -g fis3 --registry=https://registry.npm.taobao.org
# Install dependencies | 安装依赖
npm run dep
    # > Suggested Use `yarn` replace `npm run dep` | 建议使用 `yarn` 替代 `npm run dep`
    # npm i -g yarn
    # npm run yi

# Server
npm run s

# Build
npm run dev


#  build document ./output | 构建 gh-pages 版本 到 output/
npm run gh
#  git push ./output branch:gh-pages | 将 output/** 发布到 gh-pages 分支
npm run gh-push
# build commonjs code ./output | 构建 npm 要发布的代码到 output/
npm run npm
cd ./output
npm publish

Build based on fast-boot

For npm owner: npm publish Need to be in ./output