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

失眠的猫头鹰
  • 139

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

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

评论
阅读 7.3k
3 个回答

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

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
图片描述

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

撰写回答

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

宣传栏