ant-design表单处理和常用方法及自定义验证
首先要说一下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表单处理和常用方法及自定义验证的更多相关文章
- ant Design表单验证笔记
1.pattern正则验证 <Col md={12} sm={24}> <FormItem {...formItemLayout} label="班数"> ...
- Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法
Ant Design 表单中getFieldDecorator.getFieldValue.setFieldValue用法 一.getFieldDecorator getFieldDecorator是 ...
- 利用JS提交表单的几种方法和验证(必看篇)
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...
- 如何实现Ant design表单组件封装?
目标:自己实现一个antd表单组件 先看下Ant Design官网上给出的表单组件用法: import React, { Component } from 'react' import { Form, ...
- 002-pro ant design 表单基本使用、state赋值数据父子传输
一.表单元素操作事项 1.form 默认在prop中存在:this.props.form,直接使用即可 2.重置:this.props.form.resetFields(); 3.赋值:form.se ...
- 利用JS提交表单的几种方法和验证
第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function ...
- anular2 表单包含多个组件并验证提交
angular2表单最常用的方法就是在input或者textarea里直接添加formControlName或者formControlGroup进行数据双向绑定并验证. <form [formG ...
- Javascript高级编程学习笔记(78)—— 表单(6)HTML约束验证API
自动切换焦点 使用JS可以极大地提升表单的易用性 其中最常用的一种就是当用户填写完当前字段后焦点自动切换到下一个字段 以下方的HTML代码为例: <input type="text&q ...
- css修改input表单默认样式重置与自定义大全
链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式 ...
随机推荐
- 洛谷——P1744 采购特价商品
P1744 采购特价商品 题目背景 <爱与愁的故事第三弹·shopping>第一章. 题目描述 中山路店山店海,成了购物狂爱与愁大神的“不归之路”.中山路上有n(n<=100)家店, ...
- 现代CSS清除浮动
清除浮动 排除远古时代的hack解决方案,比如那些要兼容IE6~8的方法.其实总结起来,大致有三种方法: overflow 原理解析:块级格式上下文规定了页面必须自动包含突出的浮动元素! 而overf ...
- 【tomcat】tomcat远程调试
修改tomcat bin目录下的catalina.sh,增加下面这行: CATALINA_OPTS="-agentlib:jdwp=transport=dt_socket,address=9 ...
- Xamarin.iOS真机测试报错
Xamarin.iOS真机测试报错 错误信息:The MinimumOSVersion inside Info.plist does not include the device version( ...
- Oracle Linux logoOracle Linux
http://www.oschina.net/p/oracle_enterprise_linux
- HDU 3537 Daizhenyang's Coin(博弈,翻硬币)
Daizhenyang's Coin Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- minGW cygwin gnuwin32
首先,三个的官方网站分别是: minGW:http://www.mingw.org cygwin: http://www.cygwin.com gnuwin32: https://sourcefo ...
- rdlc报表集锦
rdlc报表动态生成实例 http://blog.csdn.net/fwj380891124/article/details/8803844 rdlc报表动态生成公共类 http://blog.cs ...
- 猫、路由器、交换机和PC
转载:http://duanzw102.blog.163.com/blog/static/161838173201392431722650/ 猫是 modem,是有网络供应商,比如电信公司提供的拨号工 ...
- Android Context作为参数传递this
来自:http://blog.csdn.net/sswmjoy/article/details/46119285将弹出框作为函数封装后参数为Context,供其他的类调用时,将this作为参数传入,总 ...