关于 ant design mobile 表单验证的 getFieldProps问题

如何写出自定义验证规则?

 <List renderHeader={() => 'test'}>
                        <InputItem
                            {...getFieldProps('phone',{rules: [{required: true,message:"123"}],})}
                            type="phone"
                            placeholder="input your phone"
                            error={getFieldError('phone')?true:false}
                        >手机号码</InputItem>
    
                    </List>
                    

现在的规则是必填,当然也可以用其他的定义好的规则 比如 type:string子类的,
但是可以设置自定义的验证函数吗?

阅读 6.4k
评论
    3 个回答
    • 8.5k

    验证不是这样写的,类似这种

    const { getFieldDecorator } = this.props.form;
    
    <FormItem {...formItemLayout} label="Name">
      {getFieldDecorator('username', {
        rules: [{
          required: true,
          message: 'Please input your name',
        }],
      })(
        <Input placeholder="Please input your name" />
      )}
    </FormItem>
                  <InputItem
                      {...getFieldProps('phone',{rules: [
                          {required: true,message:"必填啊"},
                          {validator(rule, value, callback, source, options){
                              var errors = [];
                              console.log(value,"Xx")
                              if(value==1){
                                  callback("wocao  111");
                              }else{
                                  callback(errors);
                              }
      
                          }}
      
                      ],})}
                      type="phone"
                      placeholder="input your phone"
                      error={getFieldError('phone')?true:false}
                  >手机号码</InputItem>
                  

      getFieldDecorator 和 getFieldProps相似 只是写法不同。
      https://github.com/react-comp...

      自定义验证就是参数 validator
      图片描述

        • 5.8k

        当然可以,使用validate方法就可以了。在文档中有链接。

          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章