1、pattern正则验证
<Col md={12} sm={24}><FormItem {...formItemLayout} label="班数">{form.getFieldDecorator('classNum', {rules: [{ required: true, message: '请输入开设班数' },{pattern:new RegExp(/^[0-9]*$/),message:'请输入正确的开设班数'}],})(<Input placeholder="请输入开设班数" />)}</FormItem></Col>

2、validator自定义校验
const validateEnrollTimelChange = (rule, value, callback) => {if (value && value !== form.getFieldValue('enrollStartTime')) {const startime = value.format('YYYY-MM-DD HH:mm');const endtime = form.getFieldValue('enrollStartTime').format('YYYY-MM-DD HH:mm');if (startime && endtime >= startime) {callback('报名结束时间不能小于报名开始时间');} else {callback();}} else {callback();}};
<FormItem {...formLayout} label="报名结束时间">{getFieldDecorator('enrollEndTime', {rules: [{ required: true, message: '请输入报名结束时间' },{validator: validateEnrollTimelChange,},],initialValue: manageData.enrollEndTime,})(<DatePickerstyle={{ width: '100%' }}disabled={opertype === 'detial' || examStatus === 3 || examStatus === 4 || examStatus === 5}format="YYYY-MM-DD HH:mm"showTime/>)}</FormItem>

 文本框验证长度

<FormItem {...formItemLayout} style={{ marginBottom: 3 }} label="学生账号" required>{form.getFieldDecorator('studentAccount', {rules: [{ required: true, message: '请输入学生账号' }, { type: 'string', max: 15, message: '最多15个字符' }],initialValue: studentAccount,})(isNew === 'true' ? <Input placeholder="请输入学生账号" /> : <span>{studentAccount}</span>)}</FormItem><FormItem {...formItemLayout} style={{ marginBottom: 3 }} label="学生姓名" required>{form.getFieldDecorator('studentName', {rules: [{ required: true, message: '请输入学生姓名' }, { type: 'string', max: 10, message: '最多10个字符' }],initialValue: studentName,})(<Input placeholder="请输入学生姓名" />)}</FormItem>

 

{ getFieldDecorator('name', { validateTrigger: ['onChange', 'onBlur'], rules: [{ required: true, whitespace: true, message: "请输入选项内容" }, { type: 'string', max: 100, message: '最多100个字符' }], initialValue: item.name })( <Input placeholder="选项内容" onChange={this.oContentChange(index)} /> )}

转载于:https://www.cnblogs.com/chen-cheng/p/10259019.html

ant Design表单验证笔记相关推荐

  1. Ant Design表单的使用

    文章目录 一.基本介绍 二.this.props.form 属性提供的 API 1.getFieldDecorator 2.getFieldValue 3.setFieldsValue 4.valid ...

  2. ant Design 表单以及表单验证

    今天用ant Design写了个修改密码的功能,随便记录一下 效果图 html代码 <div><a-modal v-model="visible" title=& ...

  3. [ant design vue] 表单验证成功,提示信息不显示

    以上是原图以及源代码,input中带有表单验证,但是输入0以后却不显示报错信息,后来通过大哥指点,因为一个a-form-item只验证一个input,所以给每一个input加一个a-form-item ...

  4. Ant Design Vue表单验证基本操作

    通过 rules 属性传入约定的验证规则.并将 <a-form-item> 的 prop 属性设置为需校验的字段名即可 formRef.value .validate()  触发效验提示通 ...

  5. antd vue表单验证_ant design vue框架中自定义表单或单个表单框验证

    一.项目要求 1.要求:点击新增按钮弹出新增页面,在输入名称时进行验证,当输入名称和列表下的名称相同,即后台数据库中存在,此时将会提醒用户,该名称已存在, 2.要求:该名称不存在,则新增成功 二.思路 ...

  6. JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】

    Java后端 学习路线 笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...

  7. JavaScript自学笔记(1)---表单验证,let和const,JSON文件

    今天开个JS自学笔记,本身JS的语法很简单,如果学过Java或者C系的都很容易,就不讨论了.主要是讨论实际应用的问题. 1.表单验证: a.html自动验证: HTML 表单验证可以通过浏览器来自动完 ...

  8. AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)

    这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> & ...

  9. JavaScript 笔记(2) -- 类型转换 正则表达 变量提升 表单验证

    目录:  typeof, null, undefined, valueOf() 类型转换 正则表达式 错误: try, catch, throw 调试工具 变量提升 strict 严格模式 使用误区 ...

最新文章

  1. LeetCode简单题之柠檬水找零
  2. 成绩从大到小排序c语言,刚学c语言,老师让用if编一个五个数字从大到小的排序,有那个大神能帮我,谢谢啦...
  3. 负载均衡服务器nginx详细安装教程及网络部署
  4. 2019春季学期第四周作业
  5. 【CodeForces - 520C】DNA Alignment (快速幂,思维)
  6. android 自定义 打包文件类型,Android Studio配置打包生成自定义文件名
  7. 是什么构成了“人工智能”热潮?
  8. u盘最大单个文件支持多少g_小身材用处大,金属U盘功能不简单
  9. PDF编辑器是怎么使用的
  10. Android机顶盒网络地址端口连通性测试
  11. python实现微信自动回复
  12. 企业微信 之 网页鉴权并与公司后台关联
  13. VOIP 语音视频通话 ---总述
  14. 蓝牙搜索显示结果到ListView(十分精简)
  15. java获取jira上的任务
  16. Python 真的好学吗?
  17. linux中常用的加密总结--base64编码解码与openssl实现
  18. 服务器虚拟机ping不通百度,未知的名称或服务,解决方法
  19. weblogic(10.3.6)
  20. IFE_js_task02

热门文章

  1. 高性能分页REST API查询生成器
  2. 使用EntityFramework Core和Enums作为字符串的ASP.NET Core Razor页面——第二部分
  3. 生成jacoco报告_jacoco生成的覆盖率文件
  4. c语言入口参数和出口参数,麻烦帮忙指出一下这个函数的入口参数和出口参数呀!...
  5. 微信小程序插件---表单验证篇
  6. mysql5.7 至少需要1560,mysq5.7.28配置innodb_page_size错误引起的错误1071(42000)
  7. 不是css3新增的技术,CSS3中的5个有趣的新技术
  8. 服务器第二代型号,SK Hynix公开第二代服务器用SSD
  9. plsql只提交存储过程里的事务_plsql 存储过程 事务
  10. php不显示内容里的图片不显示,图片显示不出来,但是数据库里有显示