React封装自定义表单校验方法

一、表单校验

        为什么要封装自定义表单校验方法，因为在后台管理系统中，通常我们会涉及到用户的添加或则信息的修改，这时候通常就涉及表单的相关校验。但通常一个系统中的表单校验针对同一个字段来说是统一的。因此我们就需要将对应的校验字段的rule中的相关方法抽离出来。因为这样我们就可以保证在不同的页面中使用的方法也是同一个方法，因此我们便可以将项目中所用到对表单字段的校验的方法统一的抽离出来以便更好的使用。

二、实现思路

        下面是一个比较简单的form表单的例子，在这个例子中，通常的做法是我们在表单项中直接写入对应的rules来作为对应的表单规则，代码如下。但是如果这里有一百个相同表单的校验，那么我们就不得不在其中写入100个相同的rules，虽然看起来可能代码量不多，但是如果校验的规则较为复杂的话，其重复量也是比较大的

    
      label="Username"
      name="username"
      rules={[{ required: true, message: 'Please input your username!' }]}
    >
      
    

三、自定义表单校验 

        怎么进行表单的自定义呢？我们在ant的官网中可以找到如下的方法，我们可以使用form的API种的rules的相关阐述，我们可以给rules中配置对应的验证规则的数组也可以是一个函数。这里的抽离校验规则我们就需要使用对应的函数了相关的代码写法如下。

        首先问什么我们需要将rules中的message去掉。因为当我们在自定义校验规则的时候，如果在自定义校验规则不通过的情况下，它无法返回我们自定义校验规则的错误提示，会一直显示默认的message的消息提示，虽然下面第二种写法看是满足了，但可能会出现对字符串的校验为空以及长度小于某值时会提示两次。所以在这里我们就统一的将所有的提示交给我们自定义的校验函数，这也比较符合封装的思想。

    
      label="Password"
      name="password"
      rules={[{ required: true,
      validator:(_,value)=>{      //参数分别对应校验规则和当前待校验的值
        return verifyUserName(value)
      }
      }]}
    >

    
      label="Password"
      name="password"
      rules={[{ required: true,message:"123123123"},{
      validator:({},value)=>{
        return verifyUserName(value)
      }
      }]}
    >



export const verifyUserName = (val) =>{
    console.log(val === '')
    if(val === '' || !val ){
        console.log(13)
        return Promise.reject('请输入内容')
    }else if(val.length < 9){
        console.log(123)
        return Promise.reject('请输入内容1')
    }else{
        return Promise.resolve('')
    }
}

四、为什么需要这样写 

        我们可以通过点击跳转到对应的源码上进行查看，可以发现源码上所定义的Validator的数据类型如下，它接口三个参数，分别是校验规则、当前值、回调函数。且其返回的类型是Promise或者void。 由于我们在设计的时候需要将参数传出去，因此我们通过上述方式书写，这样就可以方便我们在自定义函数的时候只传入当前值，而不需要将其他值传入。且Validator接收的是Promise返回值，因此我们就需要在自定义函数的那个书写时返回Promise。最后在使用return 将自定义函数返回的Promise对象再返回给Validator上。最后便完成了自定义函数抽离的方案。这样操作相比于rules中写死会更加方便，我们就需要修改校验函数，从而完成不同校验规则的实现。