Write less code, do more things!

check

check 支持同步或异步自定义校验方式, 提供不同的校验的生命周期

basic

check

<input {...self.form.item("user", {check: {...}})} />

import React , { Component } from "react"
import FormLogic from "face-form"
import $ from 'jquery'
class Basic extends Component {
    constructor (props) {
        super(props)
        const self = this
        self.state = {
            form: {
                user: 'nimo1'
            }
        }
        self.form = new FormLogic({
            app: self,
            getValue: function () {
                return self.state.form
            },
            onSync: function (value) {
                let state = self.state
                state.form = value
                self.setState({
                    form: value
                })
            }
        })
    }
    render() {
        const self = this
        return (
            <form
                onSubmit={function(e) {
                    e.preventDefault()
                    self.form.checkAll(function (fail, errors) {
                        if (fail) {
                            alert(errors[0].data)
                            self.refs[errors[0].item.ref].focus()
                            return
                        }
                        alert('success')
                    })
                }}
             >
                <input {...self.form.item('user', {
                    check: {
                        default: function (value) {
                            if(/\d/.test(value)){
                                return '不允许出现数字'
                            }else {
                                return true
                            }
                        },
                        change: function (value) {
                            return /\d/.test(value) ? '不允许出现数字' : true
                        },
                        blur: (value) => {
                            return /\d/.test(value) ? '不允许出现数字' : true
                        }
                    }
                })} />
                <pre>{self.form.error('user')}</pre>
                <button type="submit" >
                    Submit
                </button>
            </form>
        )
    }
}

export default Basic

Promise

使用 promise 校验异步的验证

check

<input {...self.form.item("user", {check: {...}})} />

import React , { Component } from "react"
import FormLogic from "face-form"
import $ from 'jquery'
class PromiseFn extends Component {
    constructor (props) {
        super(props)
        const self = this
        self.state = {
            form: {
                user: 'nimo1'
            }
        }
        self.form = new FormLogic({
            app: self,
            getValue: function () { return self.state.form },
            onSync: function (value) {
                let state = self.state
                state.form = value
                self.setState({
                    form: value
                })
            }
        })
    }
    render() {
        const self = this
        return (
            <form
                onSubmit={function(e) {
                    e.preventDefault()
                    self.form.checkAll(function (fail, errors) {
                        if (fail) {
                            alert(errors[0].data)
                            self.refs[errors[0].item.ref].focus()
                            return
                        }
                        alert('success')
                    })
                }}
             >
                <input {...self.form.item('user', {
                    check: function(value) {
                        return new Promise(function(resolve, reject) {
                            // mock do async something
                            setTimeout(function(){
                                if(/\d/.test(value)){
                                    reject('不允许出现数字')
                                }
                                if(!/\S/.test(value)){
                                    reject('用户名必填')
                                }
                                resolve()
                            },1000)
                        })
                    }
                })} />
                <pre>{self.form.error('user')}</pre>
                <button type="submit" >
                    Submit
                </button>
            </form>
        )
    }
}

export default PromiseFn

check trigger time

配置不同的时机触发不一样的校验函数, 也可以用|使之共用

check trigger time

check: fn() check: {default:...,change:...,blur:...,focus|blur:...}

import React , { Component } from "react"
import FormLogic from "face-form"
import $ from 'jquery'
class Time extends Component {
    constructor (props) {
        super(props)
        const self = this
        self.state = {
            form: {
                price: ''
            }
        }
        self.form = new FormLogic({
            app: self,
            getValue: function () { return self.state.form },
            onSync: function (value) {
                let state = self.state
                state.form = value
                self.setState({
                    form: value
                })
            }
        })
    }
    render() {
        const self = this
        return (
            <form
                onSubmit={function(e) {
                    e.preventDefault()
                    self.form.checkAll(function (fail, errors) {
                        if (fail) {
                            alert(errors[0].data)
                            self.refs[errors[0].item.ref].focus()
                            return
                        }
                        alert('success')
                    })
                }}
             >
                价格 (10~100/元): <br/>
                <input {...self.form.item('price', {
                    check: {
                        'default|blur': function(value) {
                            if(!/\S/.test(value)){
                                return '价格必填'
                            }
                            if(/[^\d]/.test(value)){
                                return '只能输入数字'
                            }
                            if(value < 10 || value > 100){
                                return '价格必须在 10 ~ 100 之间'
                            }
                            return true
                        },
                        focus: function(value) {
                            if(!/\S/.test(value)){
                                return '(获取焦点时检测)价格必填'
                            }
                            if(value < 10 || value > 100){
                                return '(获取焦点时检测)价格必须在 10 ~ 100 之间'
                            }
                            return true
                        },
                        change: (value) => {
                            return /[^\d]/.test(value) ? '(输入时检测)只能输入数字' : true
                        }
                    }
                })} />
            <pre>{self.form.error('price')}</pre>
                <button type="submit" >
                    Submit
                </button>
            </form>
        )
    }
}

export default Time

<input {...self.form.item(key, {
    check: () => { ... }
}/>
// 等同于
<input {...self.form.item(key, {
    check:{
        'default|blur': () => { ... }
    }
}/>

check checkAll

手动调用校验函数

check, checkAll

check(key, fn) check(keyArray, fn) checkAll(fn)

import React , { Component } from "react"
import FormLogic from "face-form"
import $ from 'jquery'
class CheckFn extends Component {
    constructor (props) {
        super(props)
        const self = this
        self.state = {
            form: {
                user: 'nimo123',
                psw: '',
                repsw: '',
            }
        }
        self.form = new FormLogic({
            app: self,
            getValue: function () { return self.state.form },
            onSync: function (value) {
                let state = self.state
                state.form = value
                self.setState({
                    form: value
                })
            }
        })
    }
    checkAll = () => {
        let self = this
        self.form.checkAll(function (fail, errors) {
            if (fail) {
                alert(errors[0].data)
                self.refs[errors[0].item.ref].focus()
                return
            }
            alert('success')
        })
    }
    check = (key) => {
        let self = this
        self.form.check(key, function(fail, errors) {
            if (fail) {
                alert(errors[0].data)
                self.refs[errors[0].item.ref].focus()
                return
            }
            alert('success')
        })
    }
    render() {
        const self = this
        return (
            <form onSubmit={function(e){
                    e.preventDefault();
                }}
            >
                user (非数字): <br/>
                <input {...self.form.item('user', {
                    check: (value) => {
                        return /\d/.test(value) ? '不能存在数字' : true
                    }
                })} />
                <pre>{self.form.error('user')}</pre>

                psw (必填): <br/>
                <input {...self.form.item('psw', {
                    check: (value) => {
                        return !/\S/.test(value) ? '密码必填' : true
                    }
                })} />
                <pre>{self.form.error('psw')}</pre>

                repsw (必填): <br/>
                <input {...self.form.item('repsw', {
                    check: (value) => {
                        return value == self.form.psw ? true : '密码不一致'
                    }
                })} />
                <pre>{self.form.error('repsw')}</pre>

                <button onClick={function() {
                    self.check('user')
                }}
                >check('psw')</button>
                <button onClick={function() {
                    self.check(['user','psw'])
                }}
                >check(['user','psw'])</button>
                <button onClick={function() {
                    self.checkAll()
                }}
                >checkAll</button>
            </form>
        )
    }
}

export default CheckFn

options

  • queue

    校验顺序方式 : true 队列式一次校验, false 并发式一起校验

  • every

    校验结束时机 : false 一个错就结束,执行回调, true 全部校验完成结束,执行回调

声明new FormLogic()时, 可以配置默认{function|object} options, 在调用checkcheckAll时, 无{object} options参数, 即调用声明时配置参数

调用方式

check(key, [options,] fn)
check(keyArray, [options,] fn)
checkAll([options,] fn)

import React , { Component } from "react"
import FormLogic from "face-form"
import $ from 'jquery'

class Options extends Component {
    constructor (props) {
        super(props)
        const self = this
        self.state = {
            form: {
                user: 'nimo1'
            },
            queue:true,
            every:true,
            time: 0 // 辅助计时 忽略参数
        }
        self.form = new FormLogic({
            app: self,
            getValue: function () { return self.state.form },
            onSync: function (value) {
                let state = self.state
                state.form = value
                self.setState({
                    form: value
                })
            },
            options:function () {
                return {
                    queue:self.state.queue,
                    every:self.state.every
                }
            }
            /* 也可以写成
            options: {
                queue:true,
                every:true
            }
            */
        })
    }
    checkAll = () => {
        let self = this

        /* 辅助计时 忽略代码 start */
        let count = 0
        self.setState({
            time: 0
        })
        while(count<6){
            setTimeout(()=>{
                self.setState({
                    time: self.state.time + 1
                })
                console.log(self.state.time+'s')
            },count*1000 + 1000)
            count++
        }
        /* 辅助计时 忽略代码 end */

        // 校验
        self.form.checkAll(
            function (fail, errors) {
                if (fail) {
                    alert(errors[0].data)
                    self.refs[errors[0].item.ref].focus()
                    return
                }
                alert('success')
            }
        )
        /* 也可以写成
        self.form.checkAll(
            {
                queue:true,
                every:true
            },
            function (fail, errors) {
                ...
            }
        )
        */
    }
    render() {
        const self = this
        return (
            <form
                onSubmit={function(e) {
                    e.preventDefault()
                    self.checkAll()
                }}
             >
                 user:
                 <input {...self.form.item('user', {
                     check: (value) => {
                         return /\d/.test(value) ? '不能存在数字' : true
                     }
                 })} />
                 (立即返回校验结果)
                 <pre>{self.form.error('user')}</pre>
                 psw:
                 <input {...self.form.item('psw', {
                     check: (value) => {
                         return new Promise((resolve, reject) => {
                             setTimeout(()=>{
                                 if(!/\S/.test(value)){
                                     reject('密码必填')
                                 }else{
                                     resolve()
                                 }
                             },2000)
                         })
                     }
                 })} />
                 (2秒后返回校验结果)
                 <pre>{self.form.error('psw')}</pre>
                 repsw:
                 <input {...self.form.item('repsw', {
                    check: (value) => {
                        return new Promise((resolve, reject) => {
                            setTimeout(()=>{
                                if(value == self.form.psw){
                                    resolve()
                                }else{
                                    reject('密码不一致')
                                }
                            },3000)
                        })
                    }
                })} />
                (3秒后返回校验结果)
                <pre>{self.form.error('repsw')}</pre>

                <hr/>
                    queue:
                    <select value={self.state.queue}
                        onChange={function(e){
                            self.setState({
                                queue:e.target.value == 'true' ? true : false
                            })
                        }}
                    >
                        <option value={true} >true</option>
                        <option value={false} >false</option>
                    </select>
                    every:
                    <select value={self.state.every}
                        onChange={function(e){
                            self.setState({
                                every:e.target.value == 'true' ? true : false
                            })
                        }}
                    >
                        <option value={true} >true</option>
                        <option value={false} >false</option>
                    </select>
                     {' ( 辅助计时,方便对比: '+ self.state.time+' s ) '}
                <button type="submit" >
                    Submit
                </button>
            </form>
        )
    }
}

export default Options

disabled

disabled

<input {...self.form.item("user", {disabled: <Boolean> })} />

import React , { Component } from "react"
import FormLogic from "face-form"
import $ from 'jquery'

class Disabled extends Component {
    constructor (props) {
        super(props)
        const self = this
        self.state = {
            form: {
                user: 'nimo1'
            },
            disabled:false
        }
        self.form = new FormLogic({
            app: self,
            getValue: function () { return self.state.form },
            onSync: function (value) {
                let state = self.state
                state.form = value
                self.setState({
                    form: value
                })
            }
        })
    }
    checkAll = () => {
        let self = this
        self.form.checkAll(function (fail, errors) {
            console.log(fail, errors)
            if (fail) {
                alert(errors[0].data)
                self.refs[errors[0].item.ref].focus()
                return
            }
            alert('success')
        })
    }
    render() {
        const self = this
        return (
            <form
                onSubmit={function(e) {
                    e.preventDefault()
                    self.checkAll()
                }}
             >
                <input {...self.form.item('user', {
                    disabled: self.state.disabled,
                    check: (value) => {
                        return new Promise((resolve, reject) => {
                            if(/\d/.test(value)){
                                reject('user 不允许出现数字')
                            }else{
                                resolve()
                            }
                        })
                    }
                })} />
                disabled:
                <input type="checkbox"
                        checked={self.state.disabled}
                        onChange={function(){
                            self.setState({
                                disabled:!self.state.disabled
                            })
                        }}
                />
                <pre>{self.form.error('user')}</pre>
                <button type="submit" >
                    Submit
                </button>
            </form>
        )
    }
}

export default Disabled

clear

clear

clear() clear(key) clear(keyArray)

import React , { Component } from "react"
import FormLogic from "face-form"
import $ from 'jquery'
import safeExt from 'safe-extend'
class Clear extends Component {
    constructor (props) {
        super(props)
        const self = this
        self.state = {
            type: 'company',
            form: {
                user: 'nimo1',
                company_name: '123'
            }
        }
        self.form = new FormLogic({
            app: self,
            getValue: function () {
                return self.state.form
            },
            onSync: function (value) {
                let state = self.state
                state.form = value
                self.setState({
                    form: value
                })
            }
        })
    }
    render() {
        const self = this
        console.log('self.form.data',self.form.data)
        return (
            <div>
                <select
                    name="type"
                    value={self.state.type}
                    onChange={function(e){
                        self.setState({
                            type:e.target.value
                        })
                    }}
                >
                    <option value="">其他</option>
                    <option value="company">公司注册</option>
                    <option value="person">个人注册</option>
                </select>
                <form
                    onSubmit={function(e) {
                        e.preventDefault()
                        self.form.checkAll(function (fail, errors) {
                            if (fail) {
                                alert(errors[0].data)
                                self.refs[errors[0].item.ref].focus()
                                return
                            }
                            alert('success')
                        })
                    }}
                 >
                    {
                        self.state.type
                        ? (<div>
                            名字: 
                            <input {...self.form.item('user', {
                                check: {
                                    default: function (value) {
                                        if(/\d/.test(value)){
                                            return '名字 不允许出现数字'
                                        }else {
                                            return true
                                        }
                                    },
                                    change: function (value) {
                                        return /\d/.test(value) ? '名字 不允许出现数字' : true
                                    },
                                    blur: (value) => {
                                        return /\d/.test(value) ? '名字 不允许出现数字' : true
                                    }
                                }
                            })} />
                            <pre>{self.form.error('user')}</pre>
                        </div>) : null
                    }
                    {
                        self.state.type == 'company'
                        ? (<div>
                            公司名字: 
                            <input {...self.form.item('company_name', {
                                check: {
                                    default: function (value) {
                                        if(/\d/.test(value)){
                                            return '公司名字 不允许出现数字'
                                        }else {
                                            return true
                                        }
                                    },
                                    change: function (value) {
                                        return /\d/.test(value) ? '公司名字 不允许出现数字' : true
                                    },
                                    blur: (value) => {
                                        return /\d/.test(value) ? '公司名字 不允许出现数字' : true
                                    }
                                }
                            })} />
                            <pre>{self.form.error('company_name')}</pre>
                        </div>) : null
                    }
                    <button type="submit" >
                        Submit
                    </button>
                </form>
                <hr/>
                <button 
                    onClick={function(){
                        self.setState({
                            type:''
                        })
                        self.form.clear()
                    }}
                >clear()</button>
                <button 
                    onClick={function(){
                        self.setState({
                            type:'person'
                        })
                        self.form.clear('company_name')
                    }}
                >clear('company_name')</button>
                <pre>
                    {JSON.stringify(self.form.data, null, 4)}
                </pre>
            </div>
        )
    }
}

export default Clear

Github
face-form - 项目源码
相关站点
component-spec - 组件规范
module - 开源项目脚手架
onface.cc - 资源集合