antd form表单校验使用 validateFields

最新推荐文章于 2024-04-22 16:03:00 发布
最新推荐文章于 2024-04-22 16:03:00 发布
阅读量1.1w 收藏 3
点赞数 3
分类专栏： antd 文章标签： js react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ximinglei/article/details/116987155
版权

我们在表单总会遇到必填项需要校验类似于
在这里插入图片描述
这样的 切换座机和电话就需要立即出发正则判断验证 但是切换的时候没有及时出发正则验证到时bug出现 因为正则时经过输入框判断来出发的 所以select 改变没有出发正则
所以需要antd里面的属性经过
在这里插入图片描述
你看到也很蒙不知道如何调用
因为调用会出发说有的校验但时候很尴尬
所以你需要只调用里面的一项

//  这是你ref名称
formRef.current.validateFields(['你要触发校验的名字']);

希望对你有帮助 避雷成功！！！

厚会有妻δ
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
antd form rules字数限制_antd Form rules中使用validator后form.validateFields()不能正常返回...
weixin_39890102的博客
12-19 1012
场景：表单输入框验证要求：数字、非负数、非0开头、可保留两位小数。主要在于对非0开头的自定义规则处理上。代码：//validator函数规则处理const keyUpVal = (rule, value, callback) => {if (value && value.length > 0 && parseInt(value.substr(0, 1))...
基于antd4二次封装的form组件
12-31
Form组件在antd中扮演着数据收集与验证的重要角色，它与Input、Select等控件配合，能够方便地创建表单。然而，原始的antd Form组件可能无法满足所有项目中的复杂业务逻辑，因此，二次封装是为了提高代码复用性、增强...
解决antd Form 表单校验方法无响应的问题
01-18
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应 发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动添加字段名校验, 终于, 错误的原因浮现出来了 from.validateFields([n
antd form表单验证validateFields 采坑记录
zhuangjiajia09的专栏
05-25 4004
使用form表单时，如果需要仅仅在前端对输入内容进行验证，可使用rules <a-form-item label="姓名" v-bind="formItemLayout"> <a-input class="required" placeholder="请输入" v-decorator="[ 'name', { rules: [
vue ant form validate如何对数组下的表单校验
最新发布
SailingCoder的博客
04-22 691
使用Ant Design Vue校验表单时，通过validateFields，但是如何一个数组内部的校验呢？到此，一个数组下的表单校验开发就完成了。文章到此结束，希望对你有所帮助！通过 v-for 循环渲染。对整个表单的校验，那么。实现，我们直接看代码。
antd的表单验证
qq_52845451的博客
10-26 1601
antd的表单验证
react在弹框中获取from数据的方法
hzg_hou的博客
12-07 1441
在弹框中获取from数据的方法 在class类中 1.声明 formRef = React.createRef(); 2.Ref 绑定from 3. 获取表单数据的方法 this.formRef.current.validateFields().then(values=>{}) 在hooks中 绑定ref 获取表单数据 descFrom.current.validateFields().then(values=>{}) ...
关于antd 表单validateFields validateFieldsAndScroll方法不执行的一个可能原因
weixin_43924896的博客
11-27 1万+
在使用antd form组件的的validateFields或者validateFieldsAndScroll方法时如果它没有进入方法而是直接跳过了方法，那不妨看看自定义验证方法validator代码块里是否有某一条分支没有执行 callback 函数。官方规定：自定义校验 callback 必须被调用。 补充一下我测的，调callback(null)相当于没执行callback; callba...
angular4中关于表单的校验示例
08-29
在 Angular4 中，表单校验可以通过使用响应式表单和模板驱动表单两种方式来实现。下面将详细介绍 Angular4 中关于表单的校验示例。 一、响应式表单 响应式表单是指使用 Angular 的 ReactiveFormsModule 来创建和...
解决antd的Form组件setFieldsValue的警告问题
01-21
记住：setFieldsValue的字段要对应得...在使用setFieldsValue给表单Form的某一个filed赋值时，可能掺杂了非表单控件中的字段，Form表单在赋值和渲染时发现有些字段无法渲染在现有的字段（因为不存在），所以就会报出这
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
Form.Item> { getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入用户名', }], })( <Input placeholder='\u8bf7\u8f93\u5165\u7528\u6237\u540d'/&...
vue-ant table使用radio/checkbox切换
weixin_43864599的博客
11-08 2890
ant官网文档链接 选中 table 表格，进入表格内部，点击可以查看该表格需要定义的属性 <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" ...
ant 组件中如何主动触发校验
DDAD9527的博客
01-07 1922
问题: 想在某个动作之后单独触发某一个表单的验证 const chooseUser = () => { //执行一个函数之后 单独校验某个绑定的规则 formRef.value.validateFields(['schemeUserInfo']) }; formRef为表单绑定的 :model="formState" schemeUserInfo 为某一个表单的name <a-form-item label="策划人" class="da...
React antd—current.validateFields实现登录表单校验
weixin_60463255的博客
12-10 1939
import React from 'react' import { Card, Form, Input, Button, message, Checkbox } from 'antd' import { UserOutlined, LockOutlined } from '@ant-design/icons'; export default function FormLogin(props) { //获取表单节点 const formRef = React.createRef() //校验.
react引用antd-form组件
热门推荐
qq_31307253的博客
02-22 2万+
const AddMaintainPerson = Form.create()(React.createClass({ getInitialState() { return { passwordDirty: false }; }, /** * 表单提交的内容 * @param e */
antd的form表单自定义验证validator的注意事项
Lofan 的博客
02-04 2万+
validator 这个验证在if-else里，每个判断情况都要加callback，不然会导致所有rule验证失效，页面上没填都不提示。 比如这样： <Form.Item label="模式"> {getFieldDecorator("p_mode", { rules: [ { required: true, message: "请选...
解决Antd自定义表单验证问题
Mirror_r的博客
10-25 2万+
最近项目中遇到一个表单校验的问题，看官方文档、网上搜索找了好久，终于找到了解决方案。 先阐述一下问题： 项目中的表单需要多图片上传，这个使用Upload组件就OK了，但是表单验证就出现问题了： 1、首先，上传图片项是必须项，不能无图片提交； 2、已上传的图片可以删除； 3、后端要求提交的图片为md5格式，通过上传接口获取图片的md5值，这样就不能直接使用表单提交时获取的 value值，...
6.28 antd 组件的使用
web
06-29 1077
组件CardTableForm表单 Card 1.引入文件 import { Card } from 'antd'; title 和extra可以是一些比较复杂的结构 const extra = ( <Button type="primary"> <PlusOutlined /> <span>搜索</span> </Button&gt
antd form 的校验，会弹出原生form的校验，怎么去掉原生的校验。
06-01
可以通过在 `<Form>` 组件上设置 `noValidate` 属性来禁用原生的表单验证，示例代码如下： ``` <Form noValidate> // 表单项 </Form> ``` 另外，如果你使用了 `getFieldDecorator` 来包装表单项，你还可以通过在 `getFieldDecorator` 的第二个参数中设置 `validateFirst` 属性为 `true` 来实现只使用 antd 的表单验证，代码示例： ``` <Form> <FormItem> {getFieldDecorator('username', { rules: [ { required: true, message: '请输入用户名' }, { min: 2, max: 20, message: '用户名长度为2~20个字符' }, { pattern: /^[a-zA-Z0-9_]+$/, message: '用户名只能由字母、数字和下划线组成' }, ], validateFirst: true, // 只使用 antd 的表单验证 })(<Input placeholder="用户名" />)} </FormItem> </Form> ``` 这样设置之后，就不会再弹出原生的表单验证了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值