AntDesign Form表单字段校验的三种方式
1.使用getFieldDecorator的rules规则
最简单的方法就是使用getFieldDecorator中的rules验证。rules中定义校验规则,message为校验不通过时的提示文字。
{getFieldDecorator('inputContent', {
rules: [{
required: true,
message: '请输入内容!',
}],
})(
<Input />
)}
rules校验规则
参数 | 说明 | 类型 | 默认值 | |
---|---|---|---|---|
enum | 枚举类型 | string | - | |
len | 字段长度 | number | - | |
max | 最大长度 | number | - | |
message | 校验文案 | string | ReactNode | |
min | 最小长度 | number | - | |
pattern | 正则表达式校验 | RegExp | - | |
required | 是否必选 | boolean | false |
|
transform | 校验前转换字段值 | function(value) => transformedValue:any | - | |
type | 内建校验类型,可选项 | string | 'string' | |
validator | 自定义校验(注意,callback 必须被调用) | function(rule, value, callback) | - | |
whitespace | 必选时,空格是否会被视为错误 | boolean | false |
更多高级用法可研究 async-validator。
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"
hasFeedback
validateStatus="success"
>
<Input placeholder="I'm the content" id="success" />
</FormItem> <FormItem
{...formItemLayout}
label="Warning"
hasFeedback
validateStatus="warning"
>
<Input placeholder="Warning" id="warning" />
</FormItem> <FormItem
{...formItemLayout}
label="Fail"
hasFeedback
validateStatus="error"
help="Should be combination of numbers & alphabets"
>
<Input placeholder="unavailable choice" id="error" />
</FormItem>
- 可用属性
参数 | 说明 | 类型 | 默认值 | |
---|---|---|---|---|
colon | 配合 label 属性使用,表示是否显示 label 后面的冒号 | boolean | true | |
extra | 额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。 | string | ReactNode | |
hasFeedback | 配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用 | boolean | false | |
help | 提示信息,如不设置,则会根据校验规则自动生成 | string | ReactNode | |
label | label 标签的文本 | string | ReactNode | |
labelCol | label 标签布局,同 <Col> 组件,设置 span``offset 值,如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12} |
object | ||
required | 是否必填,如不设置,则会根据校验规则自动生成 | boolean | false | |
validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | ||
wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | object |
- 注意: 这种校验方法有一个不足之处,就是不使用getFieldDecorator的话没办法设置字段名,获取输入的值的时候不能用getFieldsValue和setFieldsValue等方法对表单进行赋值和取值。
参考
https://ant.design/components/form-cn/#components-form-demo-dynamic-rule
AntDesign Form表单字段校验的三种方式的更多相关文章
- 浏览器原生 form 表单POST 数据的两种方式
我们在提交表单的时候,form表单参数中会有一个enctype的参数.enctype指定了HTTP请求的Content-Type. 常用有两种:application/x-www-form-urlen ...
- Form表单提交数据的几种方式
一.submit提交 在form标签中添加Action(提交的地址)和method(post),且有一个submit按钮(<input type='submit'>)就可以进行数据的提交, ...
- CBV装饰校验的三种方式session
代码如下: from django.shortcuts import render,HttpResponse,redirect from django.views import View # Crea ...
- Element 表单验证,不清空数据,仅仅取消表单字段校验
重置表单 this.$refs['ageForm'].resetFields() // 表单重置 仅清空校验 this.$refs['ageForm'].clearValidate() // 清除验证
- 获取form表单元素值的4种方式
<html><head><title></title><script type="text/javascript"> f ...
- form 表单提交的另一种方式 js
<html> <head> <script type="text/javascript"> function formSubmit() { fm ...
- day75 form 组件(对form表单进行输入值校验的一种方式)
我们的组件是什么呢 select distinct(id,title,price) from book ORM: model.py class Book(): title=model.CharFiel ...
- Action 中获取表单数据的三种方式
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/53138905 冷血之心的博客) Action 中获取表单提交数据 ...
- Git应用详解第四讲:版本回退的三种方式与stash
前言 前情提要:Git应用详解第三讲:本地分支的重要操作 git作为一款版本控制工具,其最核心的功能就是版本回退,没有之一.熟悉git版本回退的操作能够让你真真正正地放开手脚去开发,不用小心翼翼,怕一 ...
随机推荐
- 数据类型总结——String(字符串类型)
相关文章 简书原文:https://www.jianshu.com/p/546a755c3eb6 数据类型总结——概述:https://www.cnblogs.com/shcrk/p/9266015. ...
- php标准库中的优先队列SplPriorityQueue怎么使用?(继承)
php标准库中的优先队列SplPriorityQueue怎么使用?(继承) 一.总结 1.new对象,然后通过insert方法和extract方法来使用,top方法也很常用. 2.类的话首先想到继承, ...
- Android解决Fragment多层嵌套时onActivityResult无法正确回调的问题
前言: Fragment也可以使用startActivityForResult方法去打开一个Activity,然后在其onActivityResult方法中处理结果,可是当Fragment嵌套的时候, ...
- 算法 Tricks(四)—— 获取一个数二进制形式第一个不为 0 的位置
int n = ...; int flag = 1; while ((flag & n) == 0) flag <<= 1; // & 运算时,其实判断的是二者的二进制形式 ...
- .netcore consul实现服务注册与发现-集群完整版
原文:.netcore consul实现服务注册与发现-集群完整版 一.Consul的集群介绍 Consul Agent有两种运行模式:Server和Client.这里的Server和Clien ...
- 带你轻松看源代码---AsyncTask(异步任务)
本文出自博客Vander丶CSDN博客,如需转载请标明出处,尊重原创谢谢 博客地址:http://blog.csdn.net/l540675759/article/details/62893318 写 ...
- iOS项目中所有icon的尺寸以及命名
一般icon以下几个: Icon.png – 57×57 iPhone (ios5/6) Icon@2x.png – 114×114 iPhone Retina (ios5/6) Icon-72.pn ...
- 设置非ARC
设置非ARC: 在build phase 设置中compile sources 选择非arc文件,设置键值为-fno-objc-arc
- NSUserDefaults:通常用来保存一些小巧的数据,如用户的用户名密码,或者是用户的使用习惯,如是否自动打开背景音乐等。
1,NSUserDefaults通常用来保存一些小巧的数据,如用户的用户名密码,或者是用户的使用习惯,如是否自动打开背景音乐等. 2,使用它的原因就是:代码简短,使用方便 3,使用方法如下: -(vo ...
- PL/SQL一个简短的引论
前言 文本 PL/SQL (Procedure Language,程序语言)SQL 1999主要的数据库供应商提供结构化的共同语言 PL/SQL只有支持Oracle数据库 基本的语法 多行凝视 ...