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

本案例是同步校验表单

一、本案例与案例三是一样的操作方式

'use strict';
import React,{Component} from 'react'
import { Field, reduxForm } from 'redux-form'
//定义校验的方法
const validate = values => {
    const errors = {}
    if (!values.username) {
        errors.username = 'Required'
    } else if (values.username.length > 15) {
        errors.username = 'Must be 15 characters or less'
    }
    if (!values.email) {
        errors.email = 'Required'
    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
        errors.email = 'Invalid email address'
    }
    if (!values.age) {
        errors.age = 'Required'
    } else if (isNaN(Number(values.age))) {
        errors.age = 'Must be a number'
    } else if (Number(values.age) < 18) {
        errors.age = 'Sorry, you must be at least 18 years old'
    }
    return errors
}
//定义另外一个校验的方法
const warn = values => {
    const warnings = {}
    if (values.age < 19) {
        warnings.age = 'Hmm, you seem a bit young...'
    }
    return warnings
}
//组件
// const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
//     <div className="form-group">
//         <label>{label}</label>
//         <div>
//             <input {...input} placeholder={label} type={type} className="form-control"/>
//             {touched && ((error && <span className="text-danger">{error}</span>) || (warning && <span>{warning}</span>))}
//         </div>
//     </div>
// )
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 className="text-danger">{error}</span>) || (warning && <span className="text-danger">{warning}</span>))}
                </div>
            </div>
        )
    }
}
class SyncValidationForm1 extends Component{
    render(){
        const { handleSubmit, pristine, reset, submitting } = this.props
        return (
            <form onSubmit={handleSubmit}>
                <Field name="username" type="text" component={renderField} label="Username"/>
                <Field name="email" type="email" component={renderField} label="Email"/>
                <Field name="age" type="number" component={renderField} label="Age"/>
                <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: 'syncValidation1',
    validate,
    warn
})(SyncValidationForm1)