晨曦的博客

技术博客

0%

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

发表于 更新于 分类于 ，

详情请点阅读全文

问题：点提交按钮后执行validateFields()验证成功，但不能执行if(!error){//验证成功}内内容

分析及解决：

问题产生原因是： 使用了自定义验证函数validator:valiPrice，它的每个分支必须执行callback()函数，否则将无法通过验证
【1】此处必须进行回调函数调用，否则【2】处将无法通过验证并执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//表单提交验证
     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】直接把验证函数写在内部，注意各情况必须回调

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>