React中使用async validator进行表单验证的实例代码
react中进行表单验证毫无疑问是繁琐的,尤其对于动态添加或删除的表单,其验证逻辑更为复杂,目前UI框架使用materialui,但其表单处理不太理想,而后研究了一下另一个UI框架antdesign,其对表单的处理大大方便了逻辑的编写,它使用async-validator处理验证逻辑
目前更换框架毫无疑问是不现实的,于是就想直接引入async-validator,下面描述一个简单的使用,具体信息可以去github上查看
validate.js
importSchemafrom'async-validator';
/*
*@paramsform:{
*descriptor:验证规则
*source:待验证字段
*callback:异步验证回调函数
*}
*
*@returnerrInfo{
*isAllValid:验证是否通过
*errors:验证失败的字段信息
*}
*不管验证结果成功还是失败,都会将结果信息写入errors中,方便调用者直接通过数组下标方式获取验证结果信息
**/
functionvalidate(form){
leterrInfo={};
leterrStatus=[];
letdescriptor=form.descriptor;
letvalidator=newSchema(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);
}
});
returnerrInfo;
}exportdefaultvalidate;
Form.js
/**
*Createdbywxwon18-4-26.
*/
importReactfrom'react';
import{inject}from'mobx-react';
import{withStyles}from'material-ui/styles';
importvalidatefrom'../utils/validate';
import{formTest2}from'../utils/validateRules';
importInput,{InputLabel}from'material-ui/Input';
import{FormControl,FormHelperText}from'material-ui/Form';
import{MenuItem}from'material-ui/Menu';
importSelectfrom'material-ui/Select';
importButtonfrom'material-ui/Button';
conststyles=theme=>({
container:{
display:'flex',
flexWrap:'wrap',
},
formControl:{
margin:theme.spacing.unit,
},
button:{
margin:theme.spacing.unit,
color:'#fff'
},
});
@inject('rootStore')
@withStyles(styles)
classFormTest2extendsReact.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})});
}elseif(field==='age'){
this.setState({age:Object.assign(this.state.age,{value:event.target.value})});
}
};
handleCheck=(field)=>()=>{
if(field==='name'){
leterrInfo=validate({
descriptor:formTest2,
source:{
name:this.state.name.value,
}
});
this.setState({name:errInfo.errors[0].message});
}elseif(field==='age'){
leterrInfo=validate({
descriptor:formTest2,
source:{
age:this.state.age.value,
}
});
this.setState({age:errInfo.errors[1].message});
}
};
handleSubmit=()=>{
let{name,age}=this.state;
leterrInfo=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(
Name
{name.errMsg}
Age
{age.errMsg}
提交
exportdefaultFormTest2;
validateRules.js
/**
*Createdbywxwon18-4-26.
*/
exportconstformTest2={
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中使用asyncvalidator进行表单验证的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！