antd 表单验证大致可以分为两种

一种是 提交按钮在 在 Form.Item 内部

一种是提交按钮在 在 Form.Item 外部
// 表单外部 <div className={styles.loginBtn}> <Button type="primary"
onClick={this.onSubmit.bind(this)}> 登录 </Button> </div> // 表单外部 <Form.Item >
<div className={styles.add_book_bottom_btns}> <Button type='primary'
htmlType='submit'>保存</Button> <Button className={styles.cancle_btn}>取消</Button>
</div> </Form.Item>
注意 :在 Form.Item 外部的按钮 绑定了 事件处理函数,而在内部的没有,在内部的情况下 如果校验成功 会执行 onFinish
的回调,校验失败,会执行onFinishFail 的回调,相当于antd自动帮我们做了检查。

而没有被 Form.Item 包裹的的Button ,需要借助 FormInstance 里面的 validateFields 进行校验
import { Form } from 'antd'; const Home = (props)=>{ const [form] =
Form.useForm(); const handleValidator = async (_, value) => { let rgx =
/^[0-9]*$/; if(!rgx.test(value)){ return Promise.reject(new Error('请输入数字')); }
return Promise.resolve(); }; const validate = ()=>{ form.validateFields()
.then(values => { /* values: { username: 'username', password: 'password', } */
}) .catch(errorInfo => { /* errorInfo: { values: { username: 'username',
password: 'password', }, errorFields: [ { name: ['password'], errors: ['Please
input your Password!'] }, ], outOfDate: false, } */ }); } return ( <Form form =
{form}> <Form.Item label="预警值" name="warnval" rules={[ { validator:
handleValidator, }, ]} > <Input maxLength={8}></Input> </Form.Item> </Form> ) }

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:[email protected]
QQ群:766591547
关注微信