React-Antd4的Form表单校验
之前很少用react做项目,最近入职新公司,用的react,在自己的摸索过程中,慢慢会记录一些使用方法。今天简单记录一下使用antd 4.0版本的Form表单校验,直接代码。
需要购买阿里云产品和服务的,点击此链接领取优惠券红包,优惠购买哦,领取后一个月内有效:https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07
1、代码:
import React, {Component} from 'react'
import { Form, Input, Row, Col, Select, Button } from 'antd' class FormDemo extends Component {
constructor(props){
super(props)
} formRef = React.createRef() componentDidMount(){
const leftMenu = document.getElementById('left_menu')
leftMenu.style.minWidth = '0px'
leftMenu.style.maxWidth = '0px'
} submit =()=>{ // 点击提交时,做最后的校验
const form = this.formRef.current
form.validateFields().then((values)=>{ // 如果全部字段通过校验,会走then方法,里面可以打印出表单所有字段(一个object)
console.log('成功')
console.log(values)
}).catch((errInfo)=>{ // 如果有字段没听过校验,会走catch,里面可以打印所有校验失败的信息
console.log('失败')
console.log(errInfo)
})
} render(){
const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
}
return (
<div>
<h3>表单校验-demo</h3>
<div>
<Form ref={this.formRef}
{...layout}
// onFinish={this.onFinish}
style={{width: '600px',margin:'0 auto'}}
>
<Row gutter={24}>
<Col span={24} key="select1">
<Form.Item label="下拉框1" name="select1"
rules={[{ required: true, message: '请输入用户名!' },
]}
>
<Select
mode="multiple"
showSearch
placeholder="下拉框1"
// onChange={this.handleChangeSchool}
style={{ width: '100%' }}
>
<Option key='1' value='11'>aa</Option>
<Option key='2' value='22'>bb</Option>
<Option key='3' value='33'>cc</Option>
</Select>
</Form.Item>
</Col>
<Col span={24} key="text1">
<Form.Item label="密码" name="text1"
rules={[
{required: true, message: '请输入密码!' },
{min: 6, message: '密码至少6位!' },
{max: 10,message: '密码最长10位!'},
]}
>
<Input placeholder="text1" />
</Form.Item>
</Col>
<Col span={24} key="text2">
<Form.Item label="确认密码" name="text2"
rules={[
{required: true, message: '请输入text1!' },
// {min: 6, message: '确认密码至少6位!' },
// {max: 10,message: '确认密码最长10位!'},
{
validator: (_, value) =>{
const form = this.formRef.current
let text1 = form.getFieldValue('text1')
if(value && (value.length < 6 || value.length > 10)) {
return Promise.reject('text1必须是6~10位')
}else if(text1 != value){
return Promise.reject('两次密码不一致')
}else {
return Promise.resolve()
}
}
}
]}
>
<Input placeholder="text2" />
</Form.Item>
</Col>
<Col span={24} key="text3">
<Form.Item label="文本框3" name="text3">
<Input type="number" placeholder="text3" />
</Form.Item>
</Col>
</Row>
<Row>
<Col span={24} style={{ textAlign: 'right' }}>
<Button type="primary" onClick={this.submit} style={{ marginRight: '8px' }}>提交</Button>
</Col>
</Row>
</Form>
</div>
</div>
)
}
} export default FormDemo
2、校验效果
React-Antd4的Form表单校验的更多相关文章
- 应用二:Vue之ElementUI Form表单校验
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基 ...
- iview form表单数值类型校验「iview自定义form表单校验器」
摘录iview表单验证 Form 组件基于 sync-validator 实现的数据验证,给 Form 设置属性 rules,同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可. ...
- vue+iview的form表单校验总结
这篇文章时关于如何使用iview的form表单校验.主要学习如何使用form校验(以校验文字长度为例),以及如何动态添加校验规则和异步校验. 1.为需要校验的表单添加form标签 <!--注意: ...
- 封装react antd的form表单组件
form表单在我们日常的开发过程中被使用到的概率还是很大的,比如包含了登录.注册.修改个人信息.新增修改业务数据等的公司内部管理系统.而在使用时这些表单的样式如高度.上下边距.边框.圆角.阴影.高亮等 ...
- element-ui Form表单校验
使用element-ui自带的表单校验,注意几个点: 1.el-form通过rules属性,绑定校验规则 2.el-form-item的prop属性,设置为需要校验的字段名 3.提交后二次校验 sav ...
- vue自定义轻量级form表单校验
遇到了form表单提交的需求,找了vue的组件觉得不够灵活,有时间自己写了一个. 调用方法 全局引入注册: import va from 'global/js/va' va.install(Vue); ...
- react + antd Form表单校验
非空限制 {getFieldDecorator('name', { rules: [{ required: true, message: '名称不能为空', }],})( <Input plac ...
- vue 表单校验(二)
vue 表单校验(二) vue element-ui表单校验 由于现在使用element-ui进行form表单校验,因而使用其自带的校验规则进行校验,发现有些并不是那么好校验,或者说是校验起来很繁琐, ...
- 实现一个兼容eleUI form表单的多选组件
本质上是实现了一个eleUI select组件中的创建条目功能的组件,仅仅是将dropdown的选择框变成了label形式.支持eleUI的form表单校验,同时组件也提供了组件内自定义校验的方法.常 ...
随机推荐
- 异常检测算法Robust Random Cut Forest(RRCF)关键定理引理证明
摘要:RRCF是亚马逊发表的一篇异常检测算法,是对周志华孤立森林的改进.但是相比孤立森林,具有更为扎实的理论基础.文章的理论论证相对较为晦涩,且没给出详细的证明过程.本文不对该算法进行详尽的描述,仅对 ...
- Java解析xml文件遇到特殊符号&会出现异常的解决方案
文/朱季谦 在一次Java解析xml文件的开发过程中,使用SAX解析时,出现了这样一个异常信息: Error on line 60 of document : 对实体 "xxx" ...
- IP包头部格式解析
IPv4首部一般是20字节长.在以太网帧中,IPv4包首部紧跟着以太网帧首部,同时以太网帧首部中的协议类型值设置为080016. IPv4提供不同,大部分是很少用的选项,使得IPv4包首部最长可扩展到 ...
- welcome实现首页路由的重定向效果
welcome实现首页路由的重定向效果 1.创建welcome组件 2.在路由中引入组件并配置子组件 3.在home.vue中添加路由占位符 4.测试
- [Java] Git
版本控制 VCS(Version Control System):版本控制系统 主要功能:版本控制.主动提交.中央仓库 中央仓库功能:保存版本历史.同步团队代码 DVCS(Distributed VC ...
- Linux是一个基于POSIX和Unix的多用户、多任务、支持多线程和多CPU的性能稳定的操作系统,可免费使用并自由传播。
Linux是一个基于POSIX和Unix的多用户.多任务.支持多线程和多CPU的性能稳定的操作系统,可免费使用并自由传播. Linux是众多操作系统之一 , 目前流行的服务器和 PC 端操作系统有 L ...
- Linux巡检常用命令
# uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # hostn ...
- Hive 配置项详解
hive.ddl.output.format: hive的ddl语句的输出格式, 默认是text,纯文本,还有json格式,这个是0.90以后才出的新配置: hive.exec.script.wrap ...
- STM32的引脚的配置
http://blog.csdn.net/u010592722/article/details/45746079
- STM32SD卡 (U盘)IAP升级
http://www.openedv.com/posts/list/65104.htm