Redux-form嵌套到实际项目开发案例五

本案例是同步校验表单的另外一种写法，操作方法一样的跟案例三是一样的

一、新建一个src/component/FieldLevelValidationForm.js

'use strict';
import React,{Component} from 'react'
import {Field, reduxForm} from 'redux-form'
//定义一个必填的校验方法
const required = value => value ? undefined : 'Required';
//定义长度的方法
const maxLength = max => value =>
    value && value.length > max ? `Must be ${max} characters or less` : undefined;
//最大长度
const maxLength15 = maxLength(15);
//定义一个数字的
const number = value => value && isNaN(Number(value)) ? 'Must be a number' : undefined;
//最小数字
const minValue = min => value =>
    value && value < min ? `Must be at least ${min}` : undefined;
//最大数字
const minValue18 = minValue(18)
//邮箱
const email = value =>
    value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ?
        'Invalid email address' : undefined;
//最大年龄
const tooOld = value =>
    value && value > 65 ? 'You might be too old for this' : undefined;
//验证是aol邮箱
const aol = value =>
    value && /.+@aol\.com/.test(value) ?
        'Really? You still use AOL for your email?' : undefined

class renderField extends Component{
    render(){
        let {input, label, type, meta: {touched, error, warning}} = this.props;
        return(
            <div className="form-group">
                <label>{label}</label>
                <div>
                    <input {...input} placeholder={label} type={type} className="form-control"/>
                    {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
                </div>
            </div>
        )
    }
}

const FieldLevelValidationForm = (props) => {
    const {handleSubmit, pristine, reset, submitting} = props
    return (
        <form onSubmit={handleSubmit}>
            <Field name="username" type="text"
                   component={renderField} label="Username"
                   validate={[required, maxLength15]}
            />
            <Field name="email" type="email"
                   component={renderField} label="Email"
                   validate={[required,email]}
                   warn={aol}
            />
            <Field name="age" type="number"
                   component={renderField} label="Age"
                   validate={[required, number, minValue18]}
                   warn={tooOld}
            />
            <div>
                <button type="submit" className="btn btn-success" disabled={submitting} style={{marginRight:'20px'}}>提交</button>
                <button type="button" className="btn btn-danger" disabled={pristine || submitting} onClick={reset}>清除</button>
            </div>
        </form>
    )
}

export default reduxForm({
    form: 'fieldLevelValidation' // a unique identifier for this form
})(FieldLevelValidationForm)