ant-design表单处理和常用方法及自定义验证
首先要说一下antdesign这个框架API和demo丰富,而且开发环境提供对应的warning来纠正用户的错误。是一个很好的组件库。
关于表单验证方面是依赖于 async-validator 库。百度的san-xui组件库的表单验证也是依赖与async-validator。说明这个库的实用性还是比较高,可以多了解一下。
首先按照antDesign官网Demo。我们可以copy一个Form表单的demo。 LoginForm是表单的组件,下面代码,是React 高阶组件(Hoc)。 用于使组件获取 this.props.form
下面介绍一些常用的 this.props.form的方法。

const { form } = this.props
form.resetFields() 用于清空输入空
form.validateFields 用于验证

1.给输入框添加 键名。rules 规定输入规则。 validator可以自定义输入标准

value 标识输入内容
callback 回调函数,如果里面有字符串,代表错误提示。如果为空。代表输入正确 成功返回。
ant-design表单处理和常用方法及自定义验证的更多相关文章
- ant Design表单验证笔记
1.pattern正则验证 <Col md={12} sm={24}> <FormItem {...formItemLayout} label="班数"> ...
- Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法
Ant Design 表单中getFieldDecorator.getFieldValue.setFieldValue用法 一.getFieldDecorator getFieldDecorator是 ...
- 利用JS提交表单的几种方法和验证(必看篇)
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...
- 如何实现Ant design表单组件封装?
目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...
- 002-pro ant design 表单基本使用、state赋值数据父子传输
一.表单元素操作事项 1.form 默认在prop中存在:this.props.form,直接使用即可 2.重置:this.props.form.resetFields(); 3.赋值:form.se ...
- 利用JS提交表单的几种方法和验证
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function ...
- anular2 表单包含多个组件并验证提交
angular2表单最常用的方法就是在input或者textarea里直接添加formControlName或者formControlGroup进行数据双向绑定并验证. <form [formG ...
- Javascript高级编程学习笔记(78)—— 表单(6)HTML约束验证API
自动切换焦点 使用JS可以极大地提升表单的易用性 其中最常用的一种就是当用户填写完当前字段后焦点自动切换到下一个字段 以下方的HTML代码为例: <input type="text&q ...
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
随机推荐
- 配置文件报错:元素类型 "XXX" 必须后跟属性规范 ">" 或 "/>"
这是一个比较常见的配置错误,一般分两步. 有的情况的确是xml文件出现了语法问题,可以让IDE来帮我们检查xml文件是否真的出现了语法错误.把xml内容复制进IDE中,让IDE帮我们检查错误. 如上图 ...
- python——聊聊iterable,sequence和iterators
---------------------------------------------------------------前言----------------------------------- ...
- 图论&双连通分量&强联通分量&2-SAT
图论入门费: 数据小,大胆的写 https://vjudge.net/problem/UVA-10047 入门费 https://vjudge.net/problem/UVA-11624 思维,建图异 ...
- POJ 3660 Cow Contest (dfs)
Cow Contest Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11129 Accepted: 6183 Desc ...
- 在spring中手动编写事务
利用事务模板TransactionTemplate来手动添加事务 public void addRant(Rant rant) { transactionTemplate.execute(-?tran ...
- ANY和SOME 运算符
在SQL中ANY和SOME是同义词,所以下面介绍的时候只使用ANY,SOME的用法和功能和ANY一模一样.和IN运算符不同,ANY必须和其他的比较运算符共同使用,而且必须将比较运算符放在ANY 关键字 ...
- [P4064][JXOI2017]加法(贪心+树状数组+堆)
题目描述 可怜有一个长度为 n 的正整数序列 A,但是她觉得 A 中的数字太小了,这让她很不开心. 于是她选择了 m 个区间 [li, ri] 和两个正整数 a, k.她打算从这 m 个区间里选出恰好 ...
- [2018湖南省队集训] 6.28 T3 simulate
这道模拟题出的我毫无脾气2333 最重要的是先要发现操作顺序不影响最后的答案,也就是每次随便挑一个>=2的数进行操作最后总是可以得到同样的数列. (这个还不太难想qwq) 但是最骚的是接下来的模 ...
- 【树形dp】Rebuilding Roads
[POJ1947]Rebuilding Roads Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 11934 Accep ...
- c语言下的变量类型及计算
源码 补码 反码 机器数:一个数在计算机中的二进制表示形式, 叫做这个数的机器数.机器数是带符号的,在计算机用一个数的最高位存放符号, 正数为0, 负数为1. 真值:第一位是符号位,将带符号位的 ...