本案例是同步校验表单
一、本案例与案例三是一样的操作方式
'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
}
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)