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

Question

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

 <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子类的，
但是可以设置自定义的验证函数吗？

Answer 1

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

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>

Answer 2

            <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

Answer 3

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