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


Posted in Javascript onAugust 17, 2018

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进行表单验证的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
Vue中CSS动画原理的实现
Feb 13 Javascript
微信小程序实现下拉加载更多商品
Dec 29 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 #Javascript
layer弹出层父子页面事件相互调用方法
Aug 17 #Javascript
layer.open 按钮的点击事件关闭方法
Aug 17 #Javascript
layer弹出层全屏及关闭方法
Aug 17 #Javascript
vue+iview+less 实现换肤功能
Aug 17 #Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 #jQuery
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 #Javascript
You might like
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
简单的php购物车代码
2020/06/05 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
JavaScript数组排序功能简单实现
2020/05/14 Javascript
JS实现放大镜效果
2020/09/21 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
开源Web应用框架Django图文教程
2017/03/09 Python
python图像常规操作
2017/11/11 Python
Python subprocess库的使用详解
2018/10/26 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
旅游网创业计划书
2014/01/31 职场文书
军训自我鉴定200字
2014/02/13 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
出纳工作检讨书
2014/10/18 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
生活小常识广播稿
2015/08/19 职场文书
党校培训学习心得体会
2016/01/06 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
详解nginx进程锁的实现
2021/06/14 Servers
python异步的ASGI与Fast Api实现
2021/07/16 Python
分享7个 Python 实战项目练习
2022/03/03 Python