首先要说一下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. scrapy抓取拉勾网职位信息(三)——爬虫rules内容编写

    在上篇中,分析了拉勾网需要跟进的页面url,本篇开始进行代码编写. 在编写代码前,需要对scrapy的数据流走向有一个大致的认识,如果不是很清楚的话建议先看下:scrapy数据流 本篇目标:让拉勾网爬 ...

  2. HTTP协议1:工作原理

    http://blog.csdn.net/huangjin0507/article/details/51678858 1. HTTP简介 HTTP协议(HyperText Transfer Proto ...

  3. 【拓扑排序】【bitset】Gym - 101128A - Promotions

    给你一张DAG,若选择u点,则必须先选择所有能到达其的点.问你在选择A个点的情况下,哪些点必选:选择B个点的情况下,哪些点必选:选择B个点的情况下,哪些点一定不选. 选择A个点的情况,必选的点是那些其 ...

  4. 【矩阵乘法】Gym - 101412C - One-Dimensional Cellular Automaton

    给你一个一维细胞自动机,第i个格子在时刻t的状态是这样获得的,问你t时刻的状态. 把0时刻的状态视作一个列向量,发现状态转移其实是一个n*n的矩阵(以n=5为例), B C       A B C   ...

  5. 【树状数组】Codeforces Round #423 (Div. 1, rated, based on VK Cup Finals) C. DNA Evolution

    题意跟某道我出的等差子序列求最值非常像…… 反正询问的长度只有10种,你就建立10批树状数组,每组的公差是确定的,首项不同. 然后询问的时候只需要枚举询问串的每一位,找找这一位对应哪棵树状数组即可. ...

  6. python基础之数据类型之元组和字典

    四.元组 1.用途:元组是不可变的列表,能存多个值,但只能取,不能改 2.定义:name = (‘alex’, ’egon’, ‘wxx’) 在()内用,分割开,可存放任意类型的值 强调:x = (‘ ...

  7. Hiho : 欧拉路径

    欧拉路径 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在上一回中小Hi和小Ho控制着主角收集了分散在各个木桥上的道具,这些道具其实是一块一块骨牌. 主角继续往前走,面 ...

  8. 解决URL中包含“%2F”导致Apache地址重写mod_rewrite失效的问题

    在使用Apache地址重写mod_rewrite期间,发现,当URL和PATH_INFO中出现%2f(/)或者%5c(\), 会被认为这是个不合法的请求, Apache将会直接返回"404 ...

  9. 对js原型简单的理解和图解

    对js原型简单的理解和图解 最近在努力的学习js中,今天就抽了个空把自己理解的原型,记下一下在笔记中,以后自己查看,有空在会把原型链记录一下. 1.prototype prototype:是一个函数的 ...

  10. mq组件介绍

    作者:Jaskey Lam链接:https://zhuanlan.zhihu.com/p/25069846来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. RocketM ...