antd form表单验证失去焦点时验证和重置验证状态
1.失去焦点时验证
<Col span={12}> <Form.Item label="账号" labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} > {isAdd ? ( getFieldDecorator('bank_account', { rules: [ { required: Number(invoice_type) === 2 ? true : false, validator: (rule, value, callback) => { if (rule.required && !value) { callback('请填写开户账号!') } else if ( (rule.required || value) && /[\u4e00-\u9fa5]|\s/g.test( value ) ) { callback('不允许出现中文字符,不能出现空格') } callback() }, }, ], validateTrigger: 'onBlur' })(<Input placeholder="不允许出现中文字符,不能出现空格" />) ) : ( <span> {invoiceDetail && invoiceDetail.bank_account ? invoiceDetail.bank_account : '-'} </span> )} </Form.Item> </Col>
2.有时我们需要重置验证状态,使用场景如下:
当开发票的时候,发票有两种类型,普票和专票,当选择普票的时候,其他信息可填可不填,当选专票时,电话等信息必填。此时我们选择专票,没有填写电话信息,点提交,会报请输入电话号码,这是我们改选普票,但没有重新验证,此时页面还是展示着请填写电话,我们可以在选择普票时,获取填写的电话号码,再把电话内容重置,此时效验状态也重置了,再把电话内容赋值给输入框即可。
const content = this.props.form.getFieldsValue(['register_tel') this.props.form.resetFields(['register_tel')
this.props.form.setFieldsValue(content)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步