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) { 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 id="name-simple" value={name.value} onChange={this.handleChange('name')} placeholder="placeholder" onBlur={this.handleCheck('name')} /> <FormHelperText id="name-simple">{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 id="age-simple">{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) { if (value) { callback({ errMsg: "请输入name", value, errStatus: false }); } else { callback({ errMsg: "name不能为空", value, errStatus: true }); } } }, age: { validator(rule, value, callback, source, options) { if (value) { callback({ errMsg: "请选择age", value, errStatus: false }); } else { callback({ errMsg: "必选项", value, errStatus: true }); } } },};

综上为一个小demo,在此基础上可以进行更深层次的封装以便使用。

总结

以上所述是小编给大家介绍的React中使用async validator进行表单验证的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！