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 相关文章推荐
接收键盘指令的脚本
Jun 26 Javascript
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
Feb 04 Javascript
JavaScript设计模式之策略模式实例
Oct 10 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
vue实现个人信息查看和密码修改功能
May 06 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
js单线程的本质 Event Loop解析
Oct 29 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 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 Undefined index报错的修复方法
2011/07/17 PHP
php随机输出名人名言的代码
2012/10/07 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
PHP中soap的用法实例
2014/10/24 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
sqlalchemy对象转dict的示例
2014/04/22 Python
Python中除法使用的注意事项
2014/08/21 Python
python paramiko模块学习分享
2017/08/23 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
Python中字典的浅拷贝与深拷贝用法实例分析
2018/01/02 Python
详解django中Template语言
2020/02/22 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
幼儿园毕业家长感言
2014/02/10 职场文书
工作建议书范文
2014/05/13 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
python内置进制转换函数的操作
2021/06/02 Python
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫