react 使用antd的form表单， 使用getFieldDecorator中的rules进行格式限制以及认证

需求：

	对输入框中的内容进行校验，不能输入特殊字符，输入内容，必须大于2，小于10位

直接撸代码：

class Form extends Component {
    state = {
        createInput: '',
    }
    handleSubmit = e => {
        e.preventDefault() 
        this.props.form.validateFields({ force: true }, (err, values) => {
            if (!err) {
                this.setState(
                    {
                        createInput: values.ApiName//给input等内容赋值
                    }
                )
            }
        })
    } 
    render() {
        const { theme } = this.props 
        const { getFieldDecorator } = this.props.form
        return (
            

                
标题
                

                    

                        
                            {getFieldDecorator('ApiName', {
                                initialValue: this.state.createInput,//设置默认value 
                                rules: [
                                    {
                                        required: true,//是否为必填项
                                        whitespace: true,//是否匹配空格
                                        pattern: new RegExp(/^[a-zA-Z0-9\u4e00-\u9fa5]{2,10}$/),//要匹配等正则
                                        message: "( 2-10个字符，不能包含特殊字符 )",//输入不合法要提示等信息
                                    },
                                ],
                                validateTrigger: 'onBlur',
                            })(
                                
                            )}
                        
                        
                             创建 
                        
                    
 
                
            
        )
    }
}

export default Form.create({})(Form)

个人认为这样已经写的非常清楚了，若还看不懂，欢迎留言