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 相关文章推荐
解决Extjs上传图片无法预览的解决方法
Mar 22 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
js+canvas绘制五角星的方法
Jan 28 Javascript
AngularJS Controller作用域
Jan 09 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
Mar 03 Javascript
深入理解AngularJs-scope的脏检查(一)
Jun 19 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
vuex直接赋值的三种方法总结
Sep 16 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
微信小程序实现带放大效果的轮播图
May 26 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进行MySQL删除记录操作代码
2008/06/07 PHP
php 调用远程url的六种方法小结
2009/11/02 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
ECharts仪表盘实例代码(附源码下载)
2016/02/18 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
Node.js fs模块原理及常见用途
2020/10/22 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
python中Flask框架简单入门实例
2015/03/21 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
Python docx库用法示例分析
2019/02/16 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
python批量生成条形码的示例
2020/10/10 Python
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
大学生入党积极分子自我评价
2014/09/20 职场文书
考试作弊检讨
2015/01/27 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis