首先要说一下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. HTML的介绍

    什么是HTML? HTML:Hyper Text Markup Language :超文本标记语言. 超文本:功能比普通文本更加强大 标记语言:使用一组标签对内容进行描述的语言,它不是编程语言 htm ...

  2. Spring MVC源码——Root WebApplicationContext

    目录 Spring MVC源码--Root WebApplicationContext 上下文层次结构 Root WebApplicationContext 初始化和销毁 ContextLoaderL ...

  3. HDU 5862 Counting Intersections(离散化 + 树状数组)

    Counting Intersections Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/ ...

  4. 杭电oj 1001

    #include<iostream> using namespace std; int main() { , sum; while (cin>>n) { sum = ; // ...

  5. 【DFS】【枚举】Gym - 101246G - Revolutionary Roads

    给你一张有向图,问你将任意一条边变成双向后,所能得到的最大强连通分量的大小. 缩点之后,预处理can(i,j)表示i能到j. 之后枚举每一条边(u,v),再枚举其他所有点t,如果can(u,t) &a ...

  6. 找出最小元素 Exercise07_09

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:找出最小元素 * */ public class Exercise07_0 ...

  7. Maven打war包时,添加本地jar包

    1.在项目根目录中新建lib文件夹,添加jar包 2.在pom.xml文件中添加dependency <dependency> <groupId>com.oracle</ ...

  8. [转]Windows7下如何在MyEclipse更改JSP默认编码

    分步阅读 一般情况下,用MyEclipse创建Web项目,在WebRoot目录下新建JSP页面,页面的编码格式是:ISO-8859-1,而这个编码格式不 可以解决多种语言文本显示问题,特别是中文,容易 ...

  9. MYSQL复习笔记12-视图

    Date: 20140223Auth: Jin参考:http://blog.sina.com.cn/s/blog_436732df0100e768.html 一.介绍1.概念视图是从一个或几个基本表( ...

  10. rocketmq,zookeeper,redis分别持久化的方式

    1.rocketmq持久化: RocketMQ 的所有消息都是持久化的, 先写入系统 PAGECACHE, 然后刷盘, 可以保证内存与磁盘都有一份数据,访问时,直接从内存读取. RocketMQ 的所 ...