使用antd的form表单校验+自定义form校验

本文深入探讨Ant Design中表单组件的高级使用技巧,包括自定义校验规则及复杂表单逻辑处理,如通过遍历列表检查重复项,确保数据唯一性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

antd中关于表单的操作可以说是比较齐全了,相应的api也挺完善,由于最近的几个月都是做内部系统,因此表单操作还算比较熟悉了。
首先贴一下表单的代码

<FormItem {...formItemLayout1} label='SKU ID' >
    {getFieldDecorator('add_sku_id', {
         rules: [
             { required: true, message: '请选择' },
             //自定义的检验函数
             { validator: (rule, value, callback) => this.handleConfirmSkuId(rule, value, callback) },
         ],
     },
     )(
         <Select
             allowClear
             optionFilterProp="children"
             showSearch
             placeholder="SKU ID"
         >
             {
                 skuList.length > 0 ?
                     skuList.map((item, index) => (
                         <Option key={item.sku_id} value={(item.sku_id).toString()}>{item.sku_id}</Option>
                    ))
                : null
             }
         </Select>,
     )}
 </FormItem>

图上的rules即为antd提供的检验规则

rules: [
             { required: true, message: '请选择' },
             //自定义的检验函数
             { validator: (rule, value, callback) => this.handleConfirmSkuId(rule, value, callback) },
         ]

首先注意下rules是一个数组,校验规则是一个对象,例如rules: [{ type: ‘array’, required: true, message: ‘Please select your habitual residence!’ }] – type: 'array’就表示要求输入是个数组类型数据,这样的数据类型antd给我们了

string: Must be of type string. This is the default type.
number: Must be of type number.
boolean: Must be of type boolean.
method: Must be of type function.
regexp: Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp.
integer: Must be of type number and an integer.
float: Must be of type number and a floating point number.
array: Must be an array as determined by Array.isArray.
object: Must be of type object and not Array.isArray.
enum: Value must exist in the enum.
date: Value must be valid as determined by Date
url: Must be of type url.
hex: Must be of type hex.
email: Must be of type email.

常用的还有很多表单校验规则,例如pattern-正则表达式校验,enmu-枚举类型,len-字段长度等等,官网都是写的很清楚了
看下我实现的自定义校验函数

handleConfirmSkuId = (rule, value, callback) => {
    const { skuList } = this.state
    let skuInfo = skuList || []
    let len = skuInfo.length
    for (let i = 0; i < len; i++) {
        if (skuInfo[i].sku_id == value) {
            this.messageTip = '校验报错,已存在SKUID为:' + value + '的目标时效!'
            callback(this.messageTip)
            this.confirmParamsFlag = false
            return;
        }
    }
    this.messageTip = ''
    this.confirmParamsFlag = true
    callback()
}

函数校验被选中的数据是否在skuList列表中已存在,这个函数就是有三个参数,最后一个参数是返回提示信息的回调,不管这个函数如何,都一定要调用callback()。这里一开始遍历skuList时还犯了个错,就是用了map函数,但是map函数是不会中止的!!! 这样即使找到符合条件的,也不会有你想要的提示信息,因此我这里用了最保险的for循环。

<think>好的,我现在需要在Ant Design的Form组件中添加自定义验证规则。根据用户提供的引用内容,我需要先整理出实现的步骤和相关代码示例。首先,我应该回顾用户提供的引用,特别是引用[2]和引用[4],因为它们提到了使用validator属性和自定义校验方法。 首先,Ant Design的Form组件通过Form.Item的rules属性来定义验证规则。用户的问题是如何在这些规则中添加自定义的验证逻辑。根据引用[2],自定义验证可以通过在rules数组中添加一个带有validator属性的对象来实现。validator函数接收rule、value和回调函数cb,在验证时调用该函数,并根据验证结果调用cb返回错误信息或成功。 接下来,我需要考虑如何构造这个validator函数。例如,用户可能希望验证一个输入是否符合特定的格式,比如手机号码或邮箱。这时候,validator函数需要检查输入值,如果不符合条件,则通过cb返回一个错误消息,否则调用cb()表示成功。 此外,引用[3]提到,当表单项有嵌套结构时,可能需要自定义校验的位置和样式。这可能涉及到在自定义校验函数中处理错误信息的展示位置,但这可能超出了基础的自定义验证规则的范围,可能需要调整布局或使用Form.Item的help属性来控制错误信息的显示。 现在,我需要确保提供的代码示例正确无误,并且符合Ant Design的最新版本(比如v4或v5)。根据引用[2]中的示例,代码结构是正确的,使用rules数组,并在其中包含一个对象,该对象有validator方法。同时,引用[4]提到可以参考一篇文章,可能里面有更详细的步骤,但用户的问题可能不需要深入到这里,只需要基础的自定义验证即可。 最后,需要生成相关问题,这些问题应该围绕Ant Design表单的其他功能、性能优化或更复杂的验证场景展开。例如,如何处理异步验证,如何组合多个验证规则,或者如何自定义错误信息的显示样式。 总结步骤: 1. 在Form.Item的rules属性中添加自定义规则对象。 2. 在规则对象中定义validator函数,执行自定义逻辑。 3. 根据验证结果调用回调函数cb,传递错误信息或空值。 4. 处理可能需要的样式或布局调整,如引用[3]中的情况。 需要验证这些步骤是否正确,并确保代码示例能够直接帮助用户实现自定义验证。同时,注意区分同步和异步验证的情况,但用户的问题可能仅涉及同步验证。</think>在Ant Design的Form组件中添加自定义验证规则可以通过以下步骤实现: ### 1. 使用`validator`属性定义规则 在Form.Item的`rules`数组中添加包含`validator`属性的对象,该函数接收三个参数:`rule`(当前规则)、`value`(表单项值)和`callback`(验证结果回调)。 ```jsx <Form.Item name="phone" label="手机号" rules={[ { required: true, message: '请输入手机号' }, { validator: (rule, value, callback) => { if (!/^1[3-9]\d{9}$/.test(value)) { return callback('请输入有效的手机号码'); } callback(); // 验证通过必须调用空回调 } } ]} > <Input placeholder="11位手机号码" /> </Form.Item> ``` ### 2. 异步验证处理 通过返回Promise对象实现异步验证: ```jsx rules={[ { validator: (_, value) => new Promise((resolve, reject) => { checkUsername(value).then(valid => { valid ? resolve() : reject('用户名已存在!') }) }) } ]} ``` ### 3. 嵌套校验场景处理 当需要控制错误提示位置时,可通过`help`和`validateStatus`属性自定义展示: ```jsx <Form.Item help={parentError} validateStatus={parentError ? 'error' : ''} > <Form.Item name="address" rules={[/* 父级校验规则 */]} > <Input /> </Form.Item> <Form.Item name="detailAddress" rules={[/* 子级校验规则 */} > <Input /> </Form.Item> </Form.Item> ``` ### 4. 组合验证规则 可通过`pattern`参数组合正则表达式验证: ```jsx rules={[ { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/, message: '需包含字母和数字且至少8位' } ]} ``` [^1]: 验证失败时必须调用callback(errMessage),通过时调用callback() [^2]: 异步验证需要返回Promise对象 [^3]: 嵌套布局需要手动控制错误提示位置
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值