首先要说一下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表单处理和常用方法及自定义验证的更多相关文章

  1. ant Design表单验证笔记

    1.pattern正则验证 <Col md={12} sm={24}> <FormItem {...formItemLayout} label="班数"> ...

  2. Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法

    Ant Design 表单中getFieldDecorator.getFieldValue.setFieldValue用法 一.getFieldDecorator getFieldDecorator是 ...

  3. 利用JS提交表单的几种方法和验证(必看篇)

    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...

  4. 如何实现Ant design表单组件封装?

    目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...

  5. 002-pro ant design 表单基本使用、state赋值数据父子传输

    一.表单元素操作事项 1.form 默认在prop中存在:this.props.form,直接使用即可 2.重置:this.props.form.resetFields(); 3.赋值:form.se ...

  6. 利用JS提交表单的几种方法和验证

    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function ...

  7. anular2 表单包含多个组件并验证提交

    angular2表单最常用的方法就是在input或者textarea里直接添加formControlName或者formControlGroup进行数据双向绑定并验证. <form [formG ...

  8. Javascript高级编程学习笔记(78)—— 表单(6)HTML约束验证API

    自动切换焦点 使用JS可以极大地提升表单的易用性 其中最常用的一种就是当用户填写完当前字段后焦点自动切换到下一个字段 以下方的HTML代码为例: <input type="text&q ...

  9. css修改input表单默认样式重置与自定义大全

    链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...

随机推荐

  1. FFT实现高精度乘法

    你应该知道$FFT$是用来处理多项式乘法的吧. 那么高精度乘法和多项式乘法有什么关系呢? 观察这样一个$20$位高精度整数$11111111111111111111$ 我们可以把它处理成这样的形式:$ ...

  2. 洛谷——P1692 部落卫队

    题目描述 原始部落byteland中的居民们为了争夺有限的资源,经常发生冲突.几乎每个居民都有他的仇敌.部落酋长为了组织一支保卫部落的队伍,希望从部落的居民中选出最多的居民入伍,并保证队伍中任何2 个 ...

  3. Spring的安全机制

    Spring Security:它提供全面的安全性解决方案,同时在Web请求和方法调用处理身份确认和授权,利用依赖注入和aop技术.主要名词: 1,安全拦截器:相当应用的一把锁,能够阻止对应用程序中保 ...

  4. 【bzoj1594】猜数游戏

    1594: [Usaco2008 Jan]猜数游戏 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 556  Solved: 225 Descripti ...

  5. GIL,queue,进程池与线程池

    GIL 1.什么是GIL(这是Cpython解释器) GIL本质就是一把互斥锁,既然是互斥锁,原理都是一样的,都是让多个并发线程同一时间只能有一个执行 即:有了GIL的存在,同一进程内的多个线程同一时 ...

  6. [NOIp2017提高组]宝藏

    #include<cstdio> #include<cctype> #include<algorithm> inline int getint() { regist ...

  7. [HDU1756]Cupid's Arrow

    题目大意: 给你一个简单多边形和若干个点,问每个点在多边形内还是外. 思路: 一开始没看清楚题,写了一个叉积法,事实上叉积法只能用来处理凸多边形与点的关系. 考虑一个射线法. 从这个点水平往左作一条射 ...

  8. http://www.pass.org

    http://www.pass.org/Learning/Recordings/Listing.aspx?category=conferences

  9. 安装maven,eclipse及eclipse配置maven

    现在的eclipse,maven安装非常简单.下载解压就可以用. 官网上下载eclipse, https://www.eclipse.org/downloads/eclipse-packages/ 选 ...

  10. express-session的简单使用说明

    我们知道Internet 通过协议分为stateful和stateless两类,而http是stateless协议,客户端发送请求到服务端建立一个连接,请求得到响应后连接即中断,服务器端不会记录状态, ...