antd 表单验证_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>
         )
 
}