andtd的validateFields()验证成功,但不能执行if(!error){}内内容

49 篇文章 6 订阅

问题:点提交按钮后执行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>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值