React中使用async validator进行表单验证的实例代码

 更新时间:2018年08月17日 13:01:18   作者:roamingcode  
react上进行表单验证是很繁琐的,在这里使用async-validator处理起来就变的很方便了,接下来通过本文给大家介绍React中使用async validator进行表单验证的方法,需要的朋友可以参考下

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-router4 配合webpack require.ensure 实现异步加载的示例

    react-router4 配合webpack require.ensure 实现异步加载的示例

    本篇文章主要介绍了react-router4 配合webpack require.ensure 实现异步加载的示例,非常具有实用价值,需要的朋友可以参考下
    2018-01-01
  • React教程之封装一个Portal可复用组件的方法

    React教程之封装一个Portal可复用组件的方法

    react的核心之一是组件,下面这篇文章主要给大家介绍了关于React教程之封装一个Portal可复用组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧。
    2018-01-01
  • React入门教程之Hello World以及环境搭建详解

    React入门教程之Hello World以及环境搭建详解

    Facebook 为了开发一套更好更适合自己的JavaScript MVC 框架,所以产生了react。后来反响很好,所以于2013年5月开源。下面这篇文章主要给大家介绍了关于React入门教程之Hello World以及环境搭建的相关资料,需要的朋友可以参考借鉴。
    2017-07-07
  • React中的Context应用场景分析

    React中的Context应用场景分析

    这篇文章主要介绍了React中的Context应用场景分析,Context 提供了一种在组件之间共享数据的方式,而不必显式地通过组件树的逐层传递 props,通过实例代码给大家介绍使用步骤,感兴趣的朋友跟随小编一起看看吧
    2021-06-06
  • React路由组件传参的三种方式(params、search、state)

    React路由组件传参的三种方式(params、search、state)

    本文主要介绍了React路由组件传参的三种方式,主要包括了params、search、state,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • react echarts tree树图搜索展开功能示例详解

    react echarts tree树图搜索展开功能示例详解

    这篇文章主要为大家介绍了react echarts tree树图搜索展开功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • React中的Component组件详解

    React中的Component组件详解

    本章节,我们将一起探讨 React 中类组件和函数组件的定义,不同组件的通信方式,以及常规组件的强化方式,帮助你全方位认识 React 组件,从而对 React 的底层逻辑有进一步的理解,感兴趣的朋友跟随小编一起看看吧
    2023-06-06
  • react中涉及的增加,删除list方式

    react中涉及的增加,删除list方式

    这篇文章主要介绍了react中涉及的增加,删除list方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • 详解React Native 采用Fetch方式发送跨域POST请求

    详解React Native 采用Fetch方式发送跨域POST请求

    这篇文章主要介绍了详解React Native 采用Fetch方式发送跨域POST请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • React中事件绑定this指向三种方法的实现

    React中事件绑定this指向三种方法的实现

    这篇文章主要介绍了React中事件绑定this指向三种方法的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05

最新评论