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表单校验,同时组件也提供了组件内自定义校验的方法.常 ...
随机推荐
- 『居善地』接口测试 — 3、Requests库介绍
目录 1.Requests库 2.Requests库文档 3.Requests库安装 4.Requests库的使用 (1)使用步骤 (2)示例练习 5.补充:Json数据和Python对象互相转化 1 ...
- mysqldump中skip-tz-utc参数介绍
前言: 在前面文章中,有提到过 mysqldump 备份文件中记录的时间戳数据都是以 UTC 时区为基础的,在筛选恢复单库或单表时要注意时区差别.后来再次查看文档,发现 tz-utc.skip-tz- ...
- 移动应用开发 第5讲 Activity课堂综合练习
作业总要求使用附件"素材"压缩包中的素材完成下列任务: 1.完成小游戏主程序,如图mainActivity.png. 2.在主程序界面当按下游戏介绍按钮时进行游戏介绍界面如图gam ...
- jekyll-admin的搭建和使用
通过jekyll搭建好了自己的博客.写博客成为了日常,经过一段时间的摸索,发现jekyll-admin是个好东西,它是博客的后台管理系统,可以方便的管理和编写自己的博客 安装 运行命令gem inst ...
- centos 6 x64 yum(sohu)
centos 6 x64 yum(sohu) weixin_34405354 2012-08-23 10:07:35 24 收藏 文章标签: 运维 版权 [base] name=Base baseur ...
- Linux 目录管理
tree命令的基本使用 tree 查看当前目录的树状结构 -a 查看所有包含隐藏文件 -L 1 查看目录层级 tree /root 指定目录 根目录下的主要文件 /bin 普通用户可以执行的二进制文件 ...
- FOC_矢量控制相关资料
http://www.eepw.com.cn/news/listbylabel/label/FOC/ FOC(field-oriented control)为磁场导向控制,又称为矢量控制(vector ...
- SPI认识
SPI分为好几种模式 不同模式下 读取数据时 SCK线的状态不一样 STM32硬件SPI 有16BIT 8BIT的两种模式 既 收发都是8或16bit SPI缺少响应反馈机制 无法知道 ...
- xxl-job使用遇到的问题(二)
xxl-job使用遇到的问题(二) 关联阅读 xxl-job使用遇到的问题(一) 1.问题现象 最近有个老定时任务迁移到xxl-job的时候,遇到一个小问题.虽然很快解决,但是还是有必要记录一下~ j ...
- Linux下安装JDK 1.8你必须知道的糟心事
来源:Atstudy网校 1.简介 在Oracle收购Sun后,Java的一系列产品就被整合到Oracle官网中,打开官网乍眼一看也不知道去哪里下载,还的一个一个的摸索尝试,而且网上大多数都是一些Or ...