antd form使用pattern和validator自定义校验规则

在使用antd的form表单的时候肯定会用到表单校验，antd的表单校验今天仔细看了下还是很好用的，不仅有默认的一般校验，还支持两种自定义校验规则的方式。

• antd有默认的几种校验规则如：
• enum：枚举类型
• len：字段长度
• max：最大长度
• min:最小长度
• required：是否必选

自定义校验规则有两种方式：通过validator方法进行自定义校验 和 使用pattern进行自定义正则表达式校验

一、使用pattern进行校验

定义的时候直接在pattern中定义正则即可，这里还可以这样写：new RegExp(/^[0-9a-zA-Z_]{1,}$/,'g')

    {getFieldDecorator('loginname', {
        rules: [
            { required: true, message: '请输入登录名' },
            { max:20,message:'名称不得超过20个字符'},
            { pattern:new RegExp('^[0-9a-zA-Z_]{1,}$','g'),message:'只允许包含数字、字母、下划线'}],
            validateFirst:true
    })()}

这种方式时比较简单的方式，可以处理简单的逻辑判断。

很多时候我们的表单项需要多次使用同样的校验规则以及校验message，所以最好呢就是将公用多次使用的校验正则封装起来，这样可以避免每次写很多东西，同时有利于集中修改。

封装pattern.js:

//正则校验的正则表达式，这里注意正则表达式中的‘\’要使用‘\\’转义
const patterns = {
    "name":"^[a-zA-Z_][0-9a-zA-Z_]{0,}$",
    "tel":"^1[2-9]\\d{0,}$",
    "email":"^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$",
    "pwd":"^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[\\(\\)])+$)([^(0-9a-zA-Z)]|[\\(\\)]|[a-z]|[A-Z]|[0-9]){8,}$",
    "IP":"^(?=(\\b|\\D))(((\\d{1,2})|(1\\d{1,2})|(2[0-4]\\d)|(25[0-5]))\\.){3}((\\d{1,2})|(1\\d{1,2})|(2[0-4]\\d)|(25[0-5]))(?=(\\b|\\D))$",
    "IDCard":"(^\\d{15}$)|(^\\d{17}([0-9]|X)$)"
}


//对应正则表达式的提示信息
const patternMsg = {
    "name":"请以字母、下划线开头并包括数字、字母、下划线组成",
    "tel":"非正确的号码",
    "email":"非正确的邮箱地址",
    "pwd":"密码至少由8位包含字母、数字、特殊字符两种组合",
    "IP":"非正确IP地址",
    "IDCard":"非正确身份证号码"
}

//根据使用的正则返回对应的正则和信息对象
const pattern = (name,para='g') =>{
    return {
        pattern:new RegExp(patterns[name],para),
        message:patternMsg[name]
    }
} 

export default pattern;

使用pattern方法：

    {getFieldDecorator('loginname', {
        rules: [
            { required: true, message: '请输入登录名' },
            { max:20,message:'名称不得超过20个字符'},
            pattern('name')],
        validateFirst:true
    })()}


    {getFieldDecorator('loginpass', {
        rules: [{ required: true, message: '请输入密码' },
            pattern('pwd')],
        validateFirst:true
    })()}

二、使用validator方法进行校验：

结构：

    {getFieldDecorator('loginpass', {
        rules: [{ required: true, message: 'Please input your note!' },{
            validator:(rules,value,callback)=>{this.handleCheckPwd(rules,value,callback)}
        }],
        validateFirst:true
    })()}


    {getFieldDecorator('cfmloginpass', {
        rules: [{ required: true, message: 'Please input your note!' },{
            validator:(rules,value,callback)=>{this.handleCfmPwd(rules,value,callback)}
        }],
        validateFirst:true
    })()}

方法：

    //新密码一致校验
    handleCheckPwd(rules,value,callback){
        let cfmPwd = this.props.form.getFieldValue('cfmloginpass');
        if(cfmPwd && cfmPwd !== value){
            callback(new Error('两次密码输入不一致'))
        }else{
            callback();
        }
    }

    //确认密码校验一致
    handleCfmPwd(rules,value,callback){
        let loginpass = this.props.form.getFieldValue('loginpass');
        if(loginpass && loginpass !== value){
            callback(new Error('两次密码输入不一致'))
        }else{
            callback();
        }
    }

 这种方法可以校验比较复杂的逻辑处理，比如两次密码值的相互对比等等。

注意validator的回调函数必须返回一个callback方法进行继续的规则校验。

关于密码对比校验详细请参考：antd自定义校验规则校验两次密码是否一致