首先要说一下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. git "Could not read from remote repository.Please make sure you have the correct access rights."解决方案

    我们在使用git clone 或其他命令的时候,有时候会遇到这类问题,如图: fatal: Could not read from remote repository.Please make sure ...

  2. 苹果Itools

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha

  3. java-多线程-一道阿里面试题分析

    这段代码大多数情况下运行正常,但是某些情况下会出问题.什么时候会出现什么问题?如何修正?可见博客 http://yueyemaitian.iteye.com/blog/1387901 1.public ...

  4. sum nowcode

    时间限制:1秒 空间限制:131072K 题目描述 考虑维护一个这样的问题:(1) 给出一个数组A,标号为1~n(2) 修改数组中的一个位置.(3) 询问区间[l,r]中所有子集的位运算and之和mo ...

  5. AGC 012 C - Tautonym Puzzle

    题面在这里! 神仙构造啊qwqwq. 窝一开始只想到一个字符串长度是 O(log(N)^2) 的做法:可以发现一段相同的长度为n的字符串的贡献是 2^(n-1)-1 ,可以把它看成类二进制,枚举用了多 ...

  6. SD 一轮集训 day4 圣城鼠

    非常强的构造题. 很显然的是我们要构造一个类似菊花图的东西,因为这样的话两点之间路径的点数会非常少,很容易满足第二个条件. 但是因为直接菊花图的话会不满足第一个条件,,,所以我们可以构造一个类菊花图. ...

  7. 【置换群】poj3270 Cow Sorting

    并不应该叫置换群……只是用到了置换而已,并没有群. 题解看这个吧,我就不写了:http://www.cnblogs.com/kuangbin/archive/2012/09/03/2669013.ht ...

  8. [NOIp2016提高组]蚯蚓

    题目大意: 给你n个不同长度蚯蚓,每秒从里面取出最长的砍下u/v变成两只,又把剩下的加长q. 问你在m之前的t,2t,3t...的时间上,砍的蚯蚓长度, 以及m秒后剩下所有的蚯蚓长度. 思路: 很容易 ...

  9. Spring注解@Primary的意思

    @Primary:在众多相同的Bean中,优先使用@Primary注解的Bean. 这个和@Qualifier有点区别,@Qualifier指的是使用哪个Bean进行注入. 参考: http://bl ...

  10. HDU 4658 Integer Partition (2013多校6 1004题)

    Integer Partition Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...