Form.getFieldDecorator里面的rules可否用自定义方法来进行validate

本文主要是介绍Form.getFieldDecorator里面的rules可否用自定义方法来进行validate,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1.使用getFieldDecorator的rules规则

最简单的方法就是使用getFieldDecorator中的rules验证。rules中定义校验规则,message为校验不通过时的提示文字。

{getFieldDecorator('inputContent', {rules: [{required: true, message: '请输入内容!',}],})(<Input />
)}
  • rules校验规则

参数说明类型默认值 
enum枚举类型string- 
len字段长度number- 
max最大长度number- 
message校验文案stringReactNode 
min最小长度number- 
pattern正则表达式校验RegExp- 
required是否必选booleanfalse 
transform校验前转换字段值function(value) => transformedValue:any- 
type内建校验类型,可选项string'string' 
validator自定义校验(注意,callback 必须被调用)function(rule, value, callback)- 
whitespace必选时,空格是否会被视为错误booleanfalse 

 

2.使用getFieldDecorator的validator自定义校验

validator可以自定义校验规则,适用于无法用rules校验规则校验的情况,比如校验再次输入密码与前一次输入的密码是否相同。其中,参数val为输入的值,callback必须被调用,是校验失败时的回调,内容为提示文字。

handleValidator = (rule, val, callback) => {if (!val) {callback();}let validateResult = ...;  // 自定义规则if (!validateResult) {callback('请输入正确的内容!');}callback();}
{getFieldDecorator('validator', {rules: [{required: true,message: '请输入内容'}, {validator: this.handleValidator}]
})(<input />
)}


注意:一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child,当有多个被装饰过的 child 时,help required validateStatus 无法自动生成。此时可用下面一种方法校验。

3.使用validateStatus自定义校验

antd提供了validateStatus,help,hasFeedback 等属性,你可以不需要使用 Form.create 和 getFieldDecorator,自己定义校验的时机和内容。

  • validateStatus: 校验状态,可选 'success', 'warning', 'error', 'validating'。
  • hasFeedback:用于给输入框添加反馈图标。
  • help:设置校验文案。
<FormItem{...formItemLayout}label="Success"hasFeedbackvalidateStatus="success"><Input placeholder="I'm the content" id="success" />
</FormItem><FormItem{...formItemLayout}label="Warning"hasFeedbackvalidateStatus="warning"><Input placeholder="Warning" id="warning" />
</FormItem><FormItem{...formItemLayout}label="Fail"hasFeedbackvalidateStatus="error"help="Should be combination of numbers & alphabets"><Input placeholder="unavailable choice" id="error" />
</FormItem>

ä¸ç§æ ¡éªç¶æ

  • 可用属性
参数说明类型默认值 
colon配合 label 属性使用,表示是否显示 label 后面的冒号booleantrue 
extra额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。stringReactNode 
hasFeedback配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用booleanfalse 
help提示信息,如不设置,则会根据校验规则自动生成stringReactNode 
labellabel 标签的文本stringReactNode 
labelCollabel 标签布局,同 <Col>组件,设置 span``offset值,如 {span: 3, offset: 12}或 sm: {span: 3, offset: 12}object  
required是否必填,如不设置,则会根据校验规则自动生成booleanfalse 
validateStatus校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating'string  
wrapperCol需要为输入控件设置布局样式时,使用该属性,用法同 labelCol   
  • 注意: 这种校验方法有一个不足之处,就是不使用getFieldDecorator的话没办法设置字段名,获取输入的值的时候不能用getFieldsValue和setFieldsValue等方法对表单进行赋值和取值
  • 参考:https://www.cnblogs.com/chaoxiZ/p/10136780.html;
  • 参考:https://ant.design/components/form-cn/#components-form-demo-dynamic-rule

这篇关于Form.getFieldDecorator里面的rules可否用自定义方法来进行validate的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/600390

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

【C++】_list常用方法解析及模拟实现

相信自己的力量,只要对自己始终保持信心,尽自己最大努力去完成任何事,就算事情最终结果是失败了,努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一:什么是list? •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二:list常用接口 •🌰1.默认成员函数 🔥构造函数(⭐) 🔥析构函数 •🌰2.list对象

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi

浅谈主机加固,六种有效的主机加固方法

在数字化时代,数据的价值不言而喻,但随之而来的安全威胁也日益严峻。从勒索病毒到内部泄露,企业的数据安全面临着前所未有的挑战。为了应对这些挑战,一种全新的主机加固解决方案应运而生。 MCK主机加固解决方案,采用先进的安全容器中间件技术,构建起一套内核级的纵深立体防护体系。这一体系突破了传统安全防护的局限,即使在管理员权限被恶意利用的情况下,也能确保服务器的安全稳定运行。 普适主机加固措施:

webm怎么转换成mp4?这几种方法超多人在用!

webm怎么转换成mp4?WebM作为一种新兴的视频编码格式,近年来逐渐进入大众视野,其背后承载着诸多优势,但同时也伴随着不容忽视的局限性,首要挑战在于其兼容性边界,尽管WebM已广泛适应于众多网站与软件平台,但在特定应用环境或老旧设备上,其兼容难题依旧凸显,为用户体验带来不便,再者,WebM格式的非普适性也体现在编辑流程上,由于它并非行业内的通用标准,编辑过程中可能会遭遇格式不兼容的障碍,导致操

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验

业务中14个需要进行A/B测试的时刻[信息图]

在本指南中,我们将全面了解有关 A/B测试 的所有内容。 我们将介绍不同类型的A/B测试,如何有效地规划和启动测试,如何评估测试是否成功,您应该关注哪些指标,多年来我们发现的常见错误等等。 什么是A/B测试? A/B测试(有时称为“分割测试”)是一种实验类型,其中您创建两种或多种内容变体——如登录页面、电子邮件或广告——并将它们显示给不同的受众群体,以查看哪一种效果最好。 本质上,A/B测

【北交大信息所AI-Max2】使用方法

BJTU信息所集群AI_MAX2使用方法 使用的前提是预约到相应的算力卡,拥有登录权限的账号密码,一般为导师组共用一个。 有浏览器、ssh工具就可以。 1.新建集群Terminal 浏览器登陆10.126.62.75 (如果是1集群把75改成66) 交互式开发 执行器选Terminal 密码随便设一个(需记住) 工作空间:私有数据、全部文件 加速器选GeForce_RTX_2080_Ti

自定义类型:结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐? 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识,并举出了两个例子,我们再举出两个例子继续说明: struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo