问题:点提交按钮后执行validateFields()
验证成功,但不能执行if(!error){//验证成功}
内内容
分析及解决:
问题产生原因是: 使用了自定义验证函数validator:valiPrice
,它的每个分支必须执行callback()函数,否则将无法通过验证
【1】此处必须进行回调函数调用,否则【2】处将无法通过验证并执行
//表单提交验证
submit=()=>{
this.props.form.validateFields((error,values)=>{
if(!error){//【2】
alert('成功')
console.log(values)
}else{
alert('失败')
console.log(values)
}
})
}
//自定义验证:商品价格大于0函数
valiPrice=(rule, value, callback)=>{
//console.log(value,typeof(value)) //在价格输入-1即显示是string类型
if(value*1>0){ //字符串*1:将字符串转化为数字类型
callback() //【1】此处必须进行回调函数调用,否则将无法通过验证
}else{
callback('价格必须大于0')
}
}
<Item label='商品价格'>
{//validator自定义验证规则要求价格大于0
getFieldDecorator('price',{
initialValue:'',
rules:[
{required:true,message:'价格必须输入'},
{validator:this.valiPrice},
]
})(<Input type='number' placeholder='输入商品价格' addonAfter="元" />)
}
</Item>
<Item >
<Button type='primary' onClick={this.submit}>提交</Button>
</Item>
其它写法:直接把验证函数写在里面
【1】直接把验证函数写在内部,注意各情况必须回调
<Item label='商品价格'>
{//validator自定义验证规则要求价格大于0
getFieldDecorator('price',{
initialValue:'',
rules:[
{required:true,message:'价格必须输入'},
{validator:(rule,value,callback)=>{//【1】
if(value*1>0){ //字符串*1:将字符串转化为数字类型
callback() //此处必须进行回调函数调用,否则将无法通过验证
}else{
callback('价格必须大于0')
}
}},
]
})(<Input type='number' placeholder='输入商品价格' addonAfter="元" />)
}
</Item>