antd 表单验证

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

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

一种是提交按钮在 在 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 (
         
 
                 
                
              
          
         )

}