我的react开发笔记 - 基于antd的表单验证

无论是react还是vue，表单在提交之前都需要对其中的输入进行验证，比如判断必填项是否填写或者输入是否符合规范。因为本文使用基于react的界面库antd进行开发，因此在这里记录一下antd进行form验证的简单方法。

-- By Brisk yu

场景：在登录页面有两个输入框，分别获取用户的用户名和密码，如下所示：

从图中可以看出，该form包含三个item，分别是两个input和一个button。显然，该场景下需要进行输入校验的是两个input。

首先添加一个简单的校验规则：账号和密码是必填项，如果没有填写就给予提示。

一 当input内容改变时进行校验

通过在对应的item中添加rules属性来实现，对应代码如下：

true, message: '请输入账号' }]}>
    

true, message: '请输入密码' }]}>
    

这样此时当input中内容改变时便会触发校验。rules中规定的校验规则，这里只简单的判断是否填写，后续也可以添加自定义校验规则。如果没有填写，则输出messsage中的内容。

二 点击“登录”按钮时验证

当点击“登录”按钮时同样需要对表单进行验证，只有验证通过了才能继续进行后续操作，比如与后台交互。这里需要用到Form的validateFields方法。

1）通过useRef这个Hook定义一个Ref。在react中，ref就类似于DOM的id。虽然react和vue都不建议直接对DOM进行操作（建议通过数据响应改变DOM），但是在一些情况下仍然需要操作DOM，这时候就可以通过ref来获取DOM。注：函数组件中不支持通过字符串获取ref，需要通过useRef。如下代码所示：

const loginFormRef = useRef(null);

这样就创建了一个ref对象。其中初始值为null

2）在form中引用介个ref，代码如下：

3）这样就可以通过loginFormRef的current属性来调用form的validateFields方法来对表单进行验证。该方法是一个异步promise，代码如下：

 loginFormRef.current.validateFields().then(v => {
            console.log(v)
        }).catch(errorInfo => {
            console.log(errorInfo)
        })

这样就可以在then和catch中分别对验证成功和失败的后续代码进行编写了。

以上就是基于antd实现简单的form验证，该方法可以在input内容改变和提交表单时分别进行验证。