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" />
)}
react + antd Form表单校验的更多相关文章
- React-Antd4的Form表单校验
之前很少用react做项目,最近入职新公司,用的react,在自己的摸索过程中,慢慢会记录一些使用方法.今天简单记录一下使用antd 4.0版本的Form表单校验,直接代码. 需要购买阿里云产品和服务 ...
- 应用二:Vue之ElementUI Form表单校验
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...
- iview form表单数值类型校验「iview自定义form表单校验器」
摘录iview表单验证 Form 组件基于 sync-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可. ...
- vue+iview的form表单校验总结
这篇文章时关于如何使用iview的form表单校验.主要学习如何使用form校验(以校验文字长度为例),以及如何动态添加校验规则和异步校验. 1.为需要校验的表单添加form标签 <!--注意: ...
- element-ui Form表单校验
使用element-ui自带的表单校验,注意几个点: 1.el-form通过rules属性,绑定校验规则 2.el-form-item的prop属性,设置为需要校验的字段名 3.提交后二次校验 sav ...
- vue自定义轻量级form表单校验
遇到了form表单提交的需求,找了vue的组件觉得不够灵活,有时间自己写了一个. 调用方法 全局引入注册: import va from 'global/js/va' va.install(Vue); ...
- 前端笔记:React的form表单全部置空或者某个操作框置空的做法
1.全部置空的做法,一般在弹出框关闭后,需要重置该form所有表单: this.props.form.resetFields(); 2.针对某个操作框置空的做法 例如,form表单里有一个部门和一个张 ...
- 关于antd form表单getFieldsError方法
getFieldsError()方法其实只有required:true时,双向数据绑定. {getFieldDecorator('note', { rules: [{ required: true, ...
- React 之form表单、select、textarea、checkbox使用
1.案例如下 import React from 'react'; /** * 非约束性组(类似defaultValue等属性,不可以程序修改): <input type="text& ...
随机推荐
- php中应用memcached
PHP连接Memcached 先安装php的memcache扩展 # wget http://ip/data/attachment/forum/memcache-2.2.3.tgz# tar zxf ...
- CSV Data Set Config参数说明
以下是CSV Data Set Config各个参数的简要说明: FileName:即同目录下csv文件的名称 File Encoding: 默认为ANSI Varible Names: 定义文本文件 ...
- Linux 服务器基本优化
一:修改ulimit数 vi /etc/security/limits.conf 添加如下行: * soft noproc 65535 * hard noproc 65535 * soft nofil ...
- POJ 1182-食物链 [并查集] 《挑战程序设计竞赛》2.4
Description 动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到 ...
- JS事件中级 --- 拖拽
http://bbs.zhinengshe.com/thread-1200-1-1.html 要求:实现div块的拖拽 原理:拖拽过程中鼠标点和div块的相对位置保持不变. 需要理解三点: 1. 为什 ...
- 走进Selenium新世界
浏览器 Firefox Setup 35.0.1 安装完成后设置菜单栏 关闭浏览器自动更新 插件配置(必备武器) FireBug Firebug是firefox下的一个扩展,能够调试所有网站语言,如H ...
- Python爬虫学习==>第一章:Python3+Pip环境配置
前置操作 软件名:anaconda 版本:Anaconda3-5.0.1-Windows-x86_64清华镜像 下载链接:https://mirrors.tuna.tsinghua.edu.cn/ ...
- 【POJ - 3187】Backward Digit Sums(搜索)
-->Backward Digit Sums 直接写中文了 Descriptions: FJ 和 他的奶牛们在玩一个心理游戏.他们以某种方式写下1至N的数字(1<=N<=10). 然 ...
- 扩展Caylay定理
参考资料: https://hyscere.github.io/2019/09/05/%E6%89%A9%E5%B1%95Caylay%E5%AE%9A%E7%90%86/ https://www.c ...
- 前端数据Mock
参考链接:https://www.clloz.com/programming/front-end/js/2019/05/10/data-mock/?utm_medium=hao.caibaojian. ...