首页 > 其他 > 详细

react + antd Form表单校验

时间:2019-11-01 18:20:52      阅读:167      评论:0      收藏:0      [点我收藏+]
  • 非空限制

技术分享图片
{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" />
                  )}
技术分享图片

react + antd Form表单校验

原文:https://www.cnblogs.com/shaoshuai0305/p/11778563.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!