首先要说一下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. ShiroFilterFactoryBean分析

    创建核心Filter 同其他框架一样,都有个切入点,这个核心Filter就是拦截所有请求的. 通过web.xml中配置的Filer进入,执行init方法获取这个instance,调用下面的create ...

  2. Xamarin Android项目提示SDK版本太老

    Xamarin Android项目提示SDK版本太老 错误信息:The installed Android SDK is too old.Version 24.3.4 or newer is requ ...

  3. 【BZOJ 1052】 1052: [HAOI2007]覆盖问题 (乱搞)

    1052: [HAOI2007]覆盖问题 Description 某人在山上种了N棵小树苗.冬天来了,温度急速下降,小树苗脆弱得不堪一击,于是树主人想用一些塑料薄 膜把这些小树遮盖起来,经过一番长久的 ...

  4. 【BZOJ 1815】【SHOI 2006】color 有色图

    http://www.lydsy.com/JudgeOnline/problem.php?id=1815 这道题好难啊,组合数学什么根本不会啊qwq 题解详见08年的Pólya计数论文. 主要思想是只 ...

  5. [BZOJ3997][TJOI2015]组合数学(Dilworth定理+DP)

    题目名字是什么就不能往那方面想. 每个点拆成a[i][j]个,问题变为DAG最小路径覆盖,由Dilworth定理转成最长反链. 使用Dilworth定理的时候要注意那些点之间有边,这里任意一个点和其右 ...

  6. Codeforces Round #448(Div.2) Editorial ABC

    被B的0的情况从头卡到尾.导致没看C,心情炸裂又掉分了. A. Pizza Separation time limit per test 1 second memory limit per test ...

  7. [CODE FESTIVAL 2017]Poor Penguin

    题意:在一个$n\times m$的网格上,每个格子是薄冰或冰山(网格外什么都没有),有一片薄冰上站着一只企鹅,对于薄冰$(i,j)$,如果不满足($(i-1,j),(i+1,j)$都有东西或$(i, ...

  8. 【状压DP】BZOJ2734-[HNOI2012]集合选数

    已经八月份了药丸,开始肝作业并且准备高考啦!! [题目大意] <集合论与图论>这门课程有一道作业题,要求同学们求出{1, 2, 3, 4, 5}的所有满足以 下条件的子集:若 x 在该子集 ...

  9. 【欧拉函数】BZOJ2818-GCD

    怎么漏了这一道……本来想要水一水,结果忘记了φ[1]=1,果然要滚一遍前面的知识…… #include<iostream> #include<cstdio> #include& ...

  10. python基础之数据类型,交互,格式化输出,基本运算符

    数据类型 1.什么是数据类型? 变量值才是我们存的数据,所以数据类型指的是变量值的种类 2.为何数据要分类? 变量值是用来保存现实世界中的状态的,那么针对不同的状态,就应该用不同类型的数据去表示 3. ...