react中进行表单验证毫无疑问是繁琐的,尤其对于动态添加或删除的表单,其验证逻辑更为复杂, 目前UI框架使用material ui ,但其表单处理不太理想,而后研究了一下另一个UI 框架 ant design, 其对表单的处理大大方便了逻辑的编写, 它使用async-validator处理验证逻辑
目前更换框架毫无疑问是不现实的,于是就想直接引入async-validator,下面描述一个简单的使用,具体信息可以去github上查看
validate.js
import Schema from 'async-validator'; /* * @params form: { * descriptor: 验证规则 * source: 待验证字段 * callback: 异步验证回调函数 * } * * @return errInfo { * isAllValid: 验证是否通过 * errors: 验证失败的字段信息 * } * 不管验证结果成功还是失败,都会将结果信息写入errors中,方便调用者直接通过数组下标方式获取验证结果信息 * */ function validate (form) { let errInfo = {}; let errStatus = []; let descriptor = form.descriptor; let validator = new Schema(descriptor); validator.validate(form.source, { firstFields: true // 如果一个字段对应多个验证规则, 只显示验证失败的第一个规则信息,并不再进行后续规则的验证 }, (errors, fields) => { if (errors) { /* 如需异步验证需要传入回调函数callback */ errors.forEach(item => { errStatus.push(item.message.errStatus); }); errInfo.errors = errors; errInfo.isAllValid = !errStatus.includes(true); form.callback && form.callback(errInfo); } }); return errInfo; }export default validate;
Form.js
/** * Created by wxw on 18-4-26. */ import React from 'react'; import {inject} from 'mobx-react'; import { withStyles } from 'material-ui/styles'; import validate from '../utils/validate'; import {formTest2} from '../utils/validateRules'; import Input, { InputLabel } from 'material-ui/Input'; import { FormControl, FormHelperText } from 'material-ui/Form'; import { MenuItem } from 'material-ui/Menu'; import Select from 'material-ui/Select'; import Button from 'material-ui/Button'; const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap', }, formControl: { margin: theme.spacing.unit, }, button: { margin: theme.spacing.unit, color: '#fff' }, }); @inject('rootStore') @withStyles(styles) class FormTest2 extends React.Component { state = { name: { value: '', errStatus: false, errMsg: '请输入name' }, age: { value: '', errStatus: false, errMsg: '请选择age' } }; handleChange =(field) => event => { if (field === 'name') { this.setState({ name: Object.assign(this.state.name, {value: event.target.value}) }); } else if (field === 'age') { this.setState({ age: Object.assign(this.state.age, {value: event.target.value}) }); } }; handleCheck = (field) => () => { if (field === 'name') { let errInfo = validate({ descriptor: formTest2, source: { name: this.state.name.value, } }); this.setState({ name: errInfo.errors[0].message}); } else if (field === 'age') { let errInfo = validate({ descriptor: formTest2, source: { age: this.state.age.value, } }); this.setState({ age: errInfo.errors[1].message }); } }; handleSubmit = () => { let {name, age} = this.state; let errInfo = validate({ descriptor: formTest2, source: { name: name.value, age: age.value } }); errInfo.errors.forEach(item => { this.setState({ [item.field]: item.message }); }); if (errInfo.isAllValid) { console.log('验证成功'); } else { console.log('验证失败'); } }; render () { const { classes } = this.props; const {name, age} = this.state; return ( <div className="form2"> <FormControl className={classes.formControl} error={name.errStatus}> <InputLabel htmlFor="name-simple">Name</InputLabel> <Input value={name.value} onChange={this.handleChange('name')} placeholder="placeholder" onBlur={this.handleCheck('name')} /> <FormHelperText>{name.errMsg}</FormHelperText> </FormControl> <FormControl className={classes.formControl} error={age.errStatus}> <InputLabel htmlFor="age-simple">Age</InputLabel> <Select value={age.value} onChange={this.handleChange('age')} onBlur={this.handleCheck('age')} inputProps={{ name: 'age', id: 'age-simple', }} > <MenuItem value={10}>Ten</MenuItem> <MenuItem value={20}>Twenty</MenuItem> <MenuItem value={30}>Thirty</MenuItem> </Select> <FormHelperText>{age.errMsg}</FormHelperText> </FormControl> <Button variant="raised" color="primary" className={classes.button} onClick={this.handleSubmit}> 提交 </Button> </div> ) } }
export default FormTest2;
validateRules.js /** * Created by wxw on 18-4-26. */ export const formTest2 = { name: { validator(rule, value, callback, source, options) { /* callback必须执行一次,带参数为错误信息,不带参数为正确 */ if (value) { callback({ errMsg: "请输入name", value, errStatus: false }); } else { callback({ errMsg: "name不能为空", value, errStatus: true }); } } }, age: { validator(rule, value, callback, source, options) { /* callback必须执行一次,带参数为错误信息,不带参数为正确 */ if (value) { callback({ errMsg: "请选择age", value, errStatus: false }); } else { callback({ errMsg: "必选项", value, errStatus: true }); } } }, };
综上为一个小demo,在此基础上可以进行更深层次的封装以便使用。
总结