react + antd Form表单校验

  • 非空限制

{getFieldDecorator('name', {
rules: [{
required: true,
message: '名称不能为空',
}],
})(
<Input placeholder="请输入名称" />
)}
  • 字符串限制

  范围限制:

                  {getFieldDecorator('password', {
                    rules: [{
                      required: true,
                      message: '密码不能为空',
                    }, {
                      min:4,
                      message: '密码不能少于4个字符',
                    }, {
                      max:6,
                      message: '密码不能大于6个字符',
                    }],
                  })(
                    <Input placeholder="请输入密码" type="password"/>
                  )}

  长度限制:

                  {getFieldDecorator('nickname', {
                    rules: [{
                      required: true,
                      message: '昵称不能为空',
                    }, {
                      len: 4,
                      message: '长度需4个字符',
                    }],
                  })(
                    <Input placeholder="请输入昵称" />
                  )}
  • 自定义校验

                  {getFieldDecorator('passwordcomfire', {
                    rules: [{
                      required: true,
                      message: '请再次输入密码',
                    }, {
                      validator: passwordValidator
                    }],
                  })(
                    <Input placeholder="请输入密码" type="password"/>
                  )}

                  //  密码验证
                  const passwordValidator = (rule, value, callback) => {
                    const { getFieldValue } = form;
                    if (value && value !== getFieldValue('password')) {
                    callback('两次输入不一致!')
                  }
  
                    // 必须总是返回一个 callback,否则 validateFields 无法响应
                    callback();
                  }
  • 空格校验

                  {getFieldDecorator('hobody', {
                    rules: [{
                      whitespace: true,
                      message: '不能输入空格',
                    } ],
                  })(
                    <Input placeholder="请输入昵称" />
                  )}
  • 正则校验

                  {getFieldDecorator('qbc', {
                    rules: [{
                      message:'只能输入数字',
                      pattern: /^[0-9]+$/
                    } ],
                  })(
                    <Input placeholder="请输入ABC" />
                  )}

 

上一篇:Ant Design中getFieldDecorator方法的特殊用法(小bug)


下一篇:ASP.NET Core搭建多层网站架构【7-编写角色业务的增删改查】