©2020-2024 ioDraw All rights reserved,
Privacy Policy
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> ) }