React中使用async validator进行表单验证的实例代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了React中使用async validator进行表单验证的实例代码,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4856字,纯文字阅读大概需要7分钟。
内容图文
![React中使用async validator进行表单验证的实例代码](/upload/InfoBanner/zyjiaocheng/336/b265c85dc90f47f3b60b4ab336fbea87.jpg)
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 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) { /* 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,在此基础上可以进行更深层次的封装以便使用。
总结
以上所述是小编给大家介绍的React中使用async validator进行表单验证的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
内容总结
以上是互联网集市为您收集整理的React中使用async validator进行表单验证的实例代码全部内容,希望文章能够帮你解决React中使用async validator进行表单验证的实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。