• 非空限制

{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表单校验的更多相关文章

  1. React-Antd4的Form表单校验

    之前很少用react做项目,最近入职新公司,用的react,在自己的摸索过程中,慢慢会记录一些使用方法.今天简单记录一下使用antd 4.0版本的Form表单校验,直接代码. 需要购买阿里云产品和服务 ...

  2. 应用二:Vue之ElementUI Form表单校验

    (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的)   表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...

  3. iview form表单数值类型校验「iview自定义form表单校验器」

    摘录iview表单验证 Form 组件基于 sync-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可. ...

  4. vue+iview的form表单校验总结

    这篇文章时关于如何使用iview的form表单校验.主要学习如何使用form校验(以校验文字长度为例),以及如何动态添加校验规则和异步校验. 1.为需要校验的表单添加form标签 <!--注意: ...

  5. element-ui Form表单校验

    使用element-ui自带的表单校验,注意几个点: 1.el-form通过rules属性,绑定校验规则 2.el-form-item的prop属性,设置为需要校验的字段名 3.提交后二次校验 sav ...

  6. vue自定义轻量级form表单校验

    遇到了form表单提交的需求,找了vue的组件觉得不够灵活,有时间自己写了一个. 调用方法 全局引入注册: import va from 'global/js/va' va.install(Vue); ...

  7. 前端笔记:React的form表单全部置空或者某个操作框置空的做法

    1.全部置空的做法,一般在弹出框关闭后,需要重置该form所有表单: this.props.form.resetFields(); 2.针对某个操作框置空的做法 例如,form表单里有一个部门和一个张 ...

  8. 关于antd form表单getFieldsError方法

    getFieldsError()方法其实只有required:true时,双向数据绑定. {getFieldDecorator('note', { rules: [{ required: true, ...

  9. React 之form表单、select、textarea、checkbox使用

    1.案例如下 import React from 'react'; /** * 非约束性组(类似defaultValue等属性,不可以程序修改): <input type="text& ...

随机推荐

  1. php中应用memcached

    PHP连接Memcached 先安装php的memcache扩展 # wget  http://ip/data/attachment/forum/memcache-2.2.3.tgz# tar zxf ...

  2. CSV Data Set Config参数说明

    以下是CSV Data Set Config各个参数的简要说明: FileName:即同目录下csv文件的名称 File Encoding: 默认为ANSI Varible Names: 定义文本文件 ...

  3. Linux 服务器基本优化

    一:修改ulimit数 vi /etc/security/limits.conf 添加如下行: * soft noproc 65535 * hard noproc 65535 * soft nofil ...

  4. POJ 1182-食物链 [并查集] 《挑战程序设计竞赛》2.4

    Description 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到 ...

  5. JS事件中级 --- 拖拽

    http://bbs.zhinengshe.com/thread-1200-1-1.html 要求:实现div块的拖拽 原理:拖拽过程中鼠标点和div块的相对位置保持不变. 需要理解三点: 1. 为什 ...

  6. 走进Selenium新世界

    浏览器 Firefox Setup 35.0.1 安装完成后设置菜单栏 关闭浏览器自动更新 插件配置(必备武器) FireBug Firebug是firefox下的一个扩展,能够调试所有网站语言,如H ...

  7. Python爬虫学习==>第一章:Python3+Pip环境配置

    前置操作 软件名:anaconda  版本:Anaconda3-5.0.1-Windows-x86_64清华镜像  下载链接:https://mirrors.tuna.tsinghua.edu.cn/ ...

  8. 【POJ - 3187】Backward Digit Sums(搜索)

    -->Backward Digit Sums 直接写中文了 Descriptions: FJ 和 他的奶牛们在玩一个心理游戏.他们以某种方式写下1至N的数字(1<=N<=10). 然 ...

  9. 扩展Caylay定理

    参考资料: https://hyscere.github.io/2019/09/05/%E6%89%A9%E5%B1%95Caylay%E5%AE%9A%E7%90%86/ https://www.c ...

  10. 前端数据Mock

    参考链接:https://www.clloz.com/programming/front-end/js/2019/05/10/data-mock/?utm_medium=hao.caibaojian. ...