pattern和validator自定义校验规则

data(){ const checkNum = (rule, value, callback) => {       if (value || value === 0) {         if (value < 1 || value > 99) {           return callback(new Error('次数取值范围1~99'))         }         if (!Number.isInteger(Number(value))) {           return callback(new Error('请输入正整数'))         }       }       if (!value) {         return callback(new Error('必填字段'))       }       callback()     } } rules:{ //pattern自定义正则表达式校验 day: [           { required: true, message: '请输入', trigger: 'blur' }, 　　   {max:20,message:'不能超过20个字符'},           { pattern: /^(0|\+?[1-9][0-9]*)$/, message: '请输入正整数' },         ], price: [           { required: true, validator: checkNum, type: 'number', trigger: 'blur' }         ], }

一、使用pattern进行校验

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

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

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

很多时候我们的表单项需要多次使用同样的校验规则以及校验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方法：

<Form.Item label="登录名">
    {getFieldDecorator('loginname', {
        rules: [
            { required: true, message: '请输入登录名' },
            { max:20,message:'名称不得超过20个字符'},
            pattern('name')],
        validateFirst:true
    })(<Input autoComplete="off" />)}
</Form.Item>
<Form.Item label="用户密码">
    {getFieldDecorator('loginpass', {
        rules: [{ required: true, message: '请输入密码' },
            pattern('pwd')],
        validateFirst:true
    })(<Input autoComplete="off" />)}
</Form.Item>

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

<Form.Item label="用户密码">
    {getFieldDecorator('loginpass', {
        rules: [{ required: true, message: 'Please input your note!' },{
            validator:(rules,value,callback)=>{this.handleCheckPwd(rules,value,callback)}
        }],
        validateFirst:true
    })(<Input autoComplete="off" />)}
</Form.Item>
<Form.Item label="确认密码">
    {getFieldDecorator('cfmloginpass', {
        rules: [{ required: true, message: 'Please input your note!' },{
            validator:(rules,value,callback)=>{this.handleCfmPwd(rules,value,callback)}
        }],
        validateFirst:true
    })(<Input autoComplete="off" />)}
</Form.Item>

    //新密码一致校验
    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();
        }
    }

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