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"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 后面的冒号	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

转载于:https://www.cnblogs.com/chaoxiZ/p/10136780.html

AntDesign Form表单字段校验的三种方式相关推荐

element组件table表格/form表单显示弹窗的三种方式
element组件table表格显示弹窗的两种方式 <el-table-columnlabel="地址"prop="Address"min-width=& ...
php表单数据类型,form表单中enctype属性的三种类型
1.form表单中enctype属性的三种类型 form表单中enctype属性可以用来控制对表单数据的发送前的如何进行编码,enctype有三种,分别为: multipart/form-data不对 ...
创建一对多表结构实例 /操作的三种方式
例 1.注册App01 完成各项配置 2. 写完后自动生成一个id自增列(主键) 如果不想生成自己写创建两张表 3.执行创建语句 (其中还进行了一个小修改) 4.按照之前的方法打开数据库并输 ...
form表单字段默认值
form表单中input的text类型字段如果不填值的话,默认值为空串,即"": 我现在的需求是:让不填的字段值为 null. 实现方式:将这个字段的disabled设为true. ...
php form表单提交方式,form表单提交数据的几种方式
一.submit提交一般表单提交通过type=submit实现,input type="submit",浏览器显示为button按钮,通过点击这个按钮提交表单数据跳转到/url. ...
PHP表单提交的方式有哪两种,form表单提交数据的几种方式
一.submit提交在form标签中添加action(提交的地址)和method(post),且有一个submit按钮()就可以进行数据的提交,每一个input标签都需要有一个name属性,才能进行 ...
form表单提交数据的两种方式——submit直接提交、AJAX提交
submit提交 form表单本身提供action属性,在action属性中填写数据提交地址后,点击submit类型的按钮即可将数据提交至指定地址,代码如下: <form action=&quo ...
CBV装饰校验的三种方式session
代码如下: from django.shortcuts import render,HttpResponse,redirect from django.views import View # Crea ...
数据库表在join时的三种方式
sql 执行时最重要的两步: 1)通过什么方式获取到数据(index only scan.index scan.table full scan) 2)获取到数据后用什么方式join出结果. 下面说的是 ...

AntDesign Form表单字段校验的三种方式

1.使用getFieldDecorator的rules规则

rules校验规则

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

3.使用validateStatus自定义校验

参考

AntDesign Form表单字段校验的三种方式相关推荐

最新文章

热门文章