react中进行表单验证毫无疑问是繁琐的,尤其对于动态添加或删除的表单,其验证逻辑更为复杂,目前UI框架使用material ui,但其表单处理不太理想,而后研究了一下另一个UI 框架 ant design,其对表单的处理大大方便了逻辑的编写,它使用async-validator处理验证逻辑
目前更换框架毫无疑问是不现实的,于是就想直接引入async-validator,下面描述一个简单的使用,具体信息可以去github上查看
validate.js
{
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
({
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: '',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 (
)
}
}
export default FormTest2;
错误信息,不带参数为正确 */
if (value) {
callback({
errMsg: "请输入name",errStatus: false
});
} else {
callback({
errMsg: "name不能为空",errStatus: true
});
}
}
},age: {
validator(rule,不带参数为正确 */
if (value) {
callback({
errMsg: "请选择age",errStatus: false
});
} else {
callback({
errMsg: "必选项",};
综上为一个小demo,在此基础上可以进行更深层次的封装以便使用。
总结
以上所述是小编给大家介绍的React中使用async validator进行表单验证的实例代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
