antd+react 表单自定义验证

validator单独写在一个对象中。必须先判断value是否存在，否则验证后台提示，页面不显示未添加
代码部分

//用户名称校验
        const handleName=(rules,value,callback)=>{
            if(value){
                if (value.length<2 || value.length>10){
                    console.log("0000")
                    callback('请输入2-10位用户名称')
                    return
                }
            }else {
                callback()
            }
        }

 <Form.Item label="用户名称">
                            {
                                getFieldDecorator('userName', {
                                    rules: [
                                        {
                                            required: true,
                                            message: '请输入用户名称',
                                        },
                                        {validator:handleName}
                                    ]
                                })(<Input placeholder="请输入用户名称"/>)
                            }
                        </Form.Item>