React-Redux 异步验证

下面是简单的一个验证页面，我们需要做的就是在选择一个类目后，去判断数据库中该类目下是否有相同的值。同步验证

validate .js里面可以验证基本的是否为空，字符长短，正则等，异步

asyncValidate.js用于跑后端去从数据库进行验证（

注意：不要害怕，异步验证会不会验证没结束，直接点了保存就提交了。答案是肯定不会的，

所有的保存或点击进入下一个页面，都会先进行异步验证，异步验证没结束，不会进行下一步的操作）

import restClientRemote from '../../../../../restClientRemote';

restClientRemote是封装的fetch的文件，按自己的项目需求去做。主要的就是：

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

let WizardFormFirstPage = props => {
    const {handleSubmit,thircate} = props
    return (
        <form onSubmit={handleSubmit}>
            <div style={{marginLeft: "2%", marginBottom: "2%"}}>
                <FormTab label="resources.goods.tabs.baseInfo">
                    <Field
                        name="thircate"
                        component={Category}
                        style={{display: 'inline-block', width: '90%'}}
                    />
                    }
                    {thircate &&
                    <TextInput
                        source="goodstype"
                        label="商品型号"
                        style={{display: 'inline-block', width: '90%'}}/>
                    }
                </FormTab >
            </div>
            <div className="btnbox">
                <div className="btnitem">
                    <div className="btnposition">
                        <button type="submit" className="btncontent">
                            <div>
                                <div className="btncontentbox">
                                    <span className="btncontentboxspan">下一步</span>
                                </div>
                            </div>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    )
}



WizardFormFirstPage = reduxForm({
    form: 'wizard',
    destroyOnUnmount: false, // <------ preserve form data
    forceUnregisterOnUnmount: true,
    validate,
    asyncValidate,
    asyncBlurFields: ['goodstype', 'thircate'],
})(WizardFormFirstPage)


const selector = formValueSelector('wizard')
WizardFormFirstPage = connect(state => {
    const {thircate} = selector(state, "thircate")
    return {
        thircate,
    }
})(WizardFormFirstPage)

export default WizardFormFirstPage

其中同步验证代码：

const validate = values => {
    const errors = {}
    if (!values.thircate) {
        errors.thircate = '必填'
    }
    if (!values.goodstype) {
        errors.goodstype = '必填'
    } else {
        if (values.goodstype.length > 20) {
            errors.goodstype = '输入过长!'
        }
    }
    return errors;
}

export default validate

验证异步的代码：

import {GET_MANY} from 'admin-on-rest';
import restClientRemote from '../../../../../restClientRemote';

function asyncValidate(values) {
    let type = values.goodstype;
    let thircate = values.thircate;
    return restClientRemote(GET_MANY, 'goods/JudgeType', {
        filter: {
            goodstype: type,
            thircate: thircate
        },
        sort: {},
    }).then(response => {
        if (response.data !== undefined) {
            var flag = response.data[0]["flag"];
            if (flag) {
                throw {goodstype: '同类目下型号重复！'}
            }
        }
    });

}

export default asyncValidate