在element动态增加表单校验时，增加第二个校验总是不通过解决方式

我遇到了一个问题，在动态增加表单校验时，增加第二个校验总是不通过，结果发现，我增加的mobileRules为一维数组，当我push进去对应对象事，就会在一个数组里面增加多个校验方式，而每次从第一个开始校验，第一个没通过就直接return。

错误写法（mobileRules等于push进去的所有方法，而不是单一的校验方式）：

this.mobileRules.push({
     required: true,
     validator: this.$validate.internationalPhone,
     trigger: 'blur'
});

下面来看修改之后的代码（用二维数组）

首先，校验我写了一个全局js（validate.js），加到全局链上

function validatePhone(rule, value, callback, type) {
    let regs = {
        phoneChina: /^(\+86|86)?1[0-9]{10}$/,
        phoneHK: /^(5|6|8|9)\d{7}$/, // 八位数，5689开头
        phoneTW: /^09\d{8}$/, // 十位数，09开头
        mail: /^[\.A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
    };
    let reg = regs[type];
    let textNull = type == 'mail' ? '请输入邮箱' : '请输入手机号';
    let textErr = type == 'mail' ? '请输入正确的邮箱' : '请输入正确的手机号码';

    if (!value) {
        callback(new Error(textNull));
    } else {
        if (!reg.test(value)) {
            callback(new Error(textErr));
        }
        callback();
    }
};
class Validate {
    /**
     * 校验手机号
     */
    static internationalPhone(rule, value, callback) {
        validatePhone(rule, value, callback, 'phoneChina');
    };
    static internationalTWPhone(rule, value, callback) {
        validatePhone(rule, value, callback, 'phoneTW');
    };

    static internationalHKPhone(rule, value, callback) {
        validatePhone(rule, value, callback, 'phoneHK');
    };
    static internationalMail(rule, value, callback) {
        validatePhone(rule, value, callback, 'mail');
    };
    
}

export default Validate;

加入到main.js(全局可以用$validate调用到里面的方法)

import validate from '@/assets/utils/validate.js';
Vue.prototype.$validate = validate;

点击动态添加表单项：

     
     

         
        
        
        {{ 
         contact.contactType? '填写手机号' : '填写邮箱' }}
      
                                            
       
       /el-form-item>


       
       添加联系方式