antd 表单验证

  • 2023-04-03 18:30
  • 阅读数 23
  • CSS3
  • antd


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
Microsoft Store
SourceForge
Gitee
百度网盘（提取码：draw）
云服务器优惠
华为云优惠券
京东云优惠券
腾讯云优惠券
阿里云优惠券
Vultr优惠券
站点信息
问题反馈
邮箱：[email protected]
吐槽一下
QQ群：766591547
关注微信
©2020-2025 ioDraw All rights reserved, Privacy Policy