antd Form 手动清除校验信息
ant design form 表单 手动清除校验失败提示信息
·
antd Form 手动清除校验信息 ,
最近做业务遇到一个业务场景, 在保存时校验手机号是否错误,
antd form 默认校验方式是onChange, 此时需要使用
validateTrigger
这个api,清除输入即校验的方式
<Form.Item
name={'mobile'}
label='手机号'
validateTrigger={[]}
rules={[
{
validator: (_, value) => {
return !value || /^1[3-9]\d{9}$/.test(value)
? Promise.resolve()
: Promise.reject('请输入正确的手机号码')
},
},
]}>
<Input placeholder='请输入' onChange={changeMobile} />
</Form.Item>
表单提交手机号校验失败后,因为我们已经禁用了在输入时校验,此时需要手动清除校验失败信息,
这里使用api
setFields
设置 errors:null 清除校验失败错误提示信息
const changeMobile = e=>{
form.setFields([
{
name:'mobile',value:e.target.value,errors:null
}
])
}
更多推荐
已为社区贡献2条内容
所有评论(0)