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笔记（一）】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json？Protocol Buffer？FlatBuffers？
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
网友评论