-
-
Notifications
You must be signed in to change notification settings - Fork 53.1k
Closed
Labels
Description
感谢提供 Form 等一系列组件。
问题描述
由于要在提交前,需要对表单内的各个 field 进行再次校验,使用了 validateFieldsAndScroll
。但发现并未生效。
后来经调试,发现如果对该函数传入一组指定的 field,是可以生效的。但只要这组 fileds 中,包含了任意一个在校验规则中指定使用 validator
辅助校验的,则整个 validateFields
方法都不生效。
最后,才发现,是因为,我一开始并没有在对应的 validator
回调中,总是返回 callback()
(觉得很多余,而且一开始不写也可以对单个 input 做正常校验)。加上以后就 ok 了。
疑惑
请问,这属于 bug 吗? 因为文档中并没有指出,validator
中必须要返回 callback()
。
如果确实是必须要返回 callback
,建议要在文档中提醒开发者注意,或者默认可以缺省。
代码片段
handleSubmit = (e) => {
e.preventDefault()
const { onSubmit } = this.props
const { validateFieldsAndScroll, getFieldsValue, resetFields } = this.props.form
validateFieldsAndScroll((err, values) => {
if (!err) {
onSubmit(getFieldsValue())
}
})
}
handleConfirmPassword = (rule, value, callback) => {
const { getFieldValue } = this.props.form
if (value && value !== getFieldValue('newPassword')) {
callback('两次输入不一致!')
}
// Note: 必须总是返回一个 callback,否则 validateFieldsAndScroll 无法响应
callback()
}
render()
<FormItem
{...formItemLayout}
label="确认密码"
>
{
getFieldDecorator('confirmPassword', {
rules: [{
required: true,
message: '请再次输入以确认新密码',
}, {
validator: this.handleConfirmPassword
}],
})(<Input type="password" />)
}
</FormItem>
Environment
- antd version: 最新
- OS and its version: OS X
- Browser and its version: chrome 最新
pimkle, ldc4, PeaFull, llblh, bodadotsh and 40 moremenghuan758 and kangenpingmaiSpikeMewo and JavanShen
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
Select code repository
Activity
benjycui commentedon Mar 3, 2017
It's by designed: https://github.com/yiminghe/async-validator/
BTW, how does async-validator know an asynchronous procedure is end, if you don't use
callback
to notify it?afc163 commentedon Mar 7, 2017
被人吐槽了 https://www.zhihu.com/question/33629737/answer/150154145
可以加一个文档说明,我们做开源的原则之一是兵来将挡水来土掩。
docs: Add API document for Form validation rule
afc163 commentedon Mar 7, 2017
文档已更新。
LukerSpringtree commentedon Jul 21, 2017
你好是否 这种用法 只能用 class 的写法?
能否用 纯函数的 写法 写 React Component .如果有,有没有案例啊?
neekey commentedon Sep 25, 2017
这个API设计真的是很不优雅,感受下我只是想做一下某个checkbox是否选中的检查:
并且给到callback的第一个参数是错误信息,和
message
也是冗余(虽然似乎只要返回任何东西都会使用message
了,应该是message
覆盖了错误信息)。大部分使用者预期的使用方式应该是直接返回
true
或者false
来决定对错:可用,但是还是建议优化这个API,即使用的是 https://github.com/yiminghe/async-validator/,但是ANT这边完成全可以在调用上封装一下
afc163 commentedon Sep 25, 2017
@neekey 可以去给 async-validator 提个兼容的 PR
30 remaining items
kongling94 commentedon Feb 21, 2020
我在想这个AntdV是不维护了么
afc163 commentedon Feb 21, 2020
@kongling94 ?
mark-lauq commentedon Mar 3, 2020
同样遇到这个问题,没下文了?
runningvip commentedon May 6, 2020
<a-input id="code" placeholder="请输入用户ID"v-decorator="[ 'code', {rules: [{ required: true, message: '请输入用户ID' }, { validator: handleUsername }], validateTrigger: 'change'} ]" > </a-input>
handleUsername(rule, value, callback) { value = value.trim() if (value.length == 0) { this.username = ''; callback(); } else { fetchUsername({ code: value }) .then((rest) => { if (rest.code == 200) { this.username = rest.data; //callback(); } else { this.username = ''; callback(new Error(rest.msg)) return; } }).finally(() => { callback() }) } },
<a-form :label-col="labelCol" :wrapper-col="wrapperCol" :form="form" @submit="handleSubmit"> <a-button type="primary" htmlType="submit">确定</a-button> </a-form>
点确定没有任何反应 不进行任何提示,在console 里面输入async-validator:["code is required"]
根本没有进validateFields
去掉 validator 和 validateTrigger 点确定就会正常提示。
这是什么问题?
Nicole1991 commentedon Jul 27, 2020
请问你这个问题解决了吗?同样碰到了这个问题
weilun0510 commentedon Jul 31, 2020
angle12138 commentedon Aug 15, 2020
validatorFun(rule, value, callback) {
const psw = this.form.getFieldValue('newPwd')
if (value && value !== psw) {
rule.message = '两次密码不一致'
callback(rule)
}
callback()
}
src/views/user/Register.vue
的handlePasswordLevel
函数缺少 callback 调用 vueComponent/ant-design-vue-pro#1144RainLucky commentedon Apr 4, 2021
我遇到的问题是我使用了a-radio-group的,然后我只对其进行空值校验,因为有需求要在选择两个条件后发起请求,所以又对radio-group做了@change监听,两个单选组必须都选择了才发起请求,此时用@change来validate这两个条件值是否为空,一开始为空时,正常提示,后面两个值都不为空时不走validate().then()而是走的catch(error)为什么?而且console.log(error)打印出来的errorFields是空的,value显示两个校验字段都有值了,百思不得解。

woshidashengtadie commentedon Apr 7, 2022
const money = (rule: any, value: any, callback:any) => { console.log(rule, value);callback('请输入合法金额数字') } warning.js:6 Warning:
callback
is deprecated. Please return a promise instead.keminu commentedon May 24, 2022
2022 年了,还callback嘛?
LSunnyCN commentedon Feb 1, 2023
我在提交前进行所有字段校验时报错,定位到是因为一个自定义校验,但不知道为什么会报错。
自定义校验
提交后的校验
form.validateFields((errors, values) => {})
error信息
BoBoooooo commentedon Feb 15, 2023
2023年了。。请问这个 validator: ()=> boolean的方法有计划支持么。。
liebodyuebai commentedon Oct 30, 2024
解决了么