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 元素样式 ...
随机推荐
- java原理—反射机制
http://www.cnblogs.com/forlina/archive/2011/06/21/2085849.html 一.什么是反射:反射的概念是由Smith在1982年首次提出的,主要是指程 ...
- Linux命令之nice和renice
(1).nice命令 nice [选项] [命令 [参数]] 在执行程序之前,改变优先级.以调整过的优先级运行命令.如果没有给出命令,就显示当前的优先级.优先级范围从-20到19,越小优先级越高,默认 ...
- [BZOJ5011][JXOI2017]颜色
5011: [Jx2017]颜色 Time Limit: 30 Sec Memory Limit: 512 MBSubmit: 84 Solved: 46[Submit][Status][Disc ...
- [BZOJ 4537][Hnoi 2016]最小公倍数
传送门 并查集+分块 看到题目可以想到暴力做法, 对于每个询问, 将所有a和b小于等于询问值的的边加入图中(用并查集), 如果询问的u和v在一个联通块中, 且该联通块的maxa和maxb均等与询问的a ...
- 【线性筛】【质因数分解】【约数个数定理】hdu6069 Counting Divisors
d(x)表示x的约数个数,让你求(l,r<=10^12,r-l<=10^6,k<=10^7) #include<cstdio> using namespace std; ...
- 【欧拉回路】【Fleury算法】CDOJ1642 老当益壮, 宁移白首之心?
题意: 构造一个01串,使得满足以下条件: 1. 环状(即首尾相连) 2. 每一位取值为0或1 3. 长度是2^n 4. 对于每个(2^n个)位置,从其开始沿逆时针方向的连续的n位01串(包括自己) ...
- sql server 2012 登录失败出现10048错误
好久没用sql server了,今天登录我的一个数据库中的时候突然登录不了,账号密码没有错,到服务中看的时候看到我那个数据库没有启动,心想启动应该就好了. 然后出现了这个错误,度娘了一下,网上大家的方 ...
- NHibernate Linq查询 扩展增强 (第九篇)
在上一篇的Linq to NHibernate的介绍当中,全部是namespace NHibernate命名空间中的IQueryOver<TRoot, TSubType>接口提供的.IQu ...
- andriod 获得时间
import java.text.SimpleDateFormat;import java.util.Date; public static String getCurrentTime() { Sim ...
- 如何在windows下的Python开发工具IDLE里安装其他模块
以安装Httplib2模块为例 1 下载模块 到 “https://code.google.com/p/httplib2/” 下载一款适合你的压缩包“httplib2-0.4.0.zip” 2 解压下 ...