在element动态增加表单校验时，增加第二个校验总是不通过解决方式_rules.push({ required: true, validator: only, trig

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

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

 <el-form-item
     v-for="(contact, index) in form.contacts"
     :key="contact.key"
     :prop="'contacts.' + index + '.value'"
     :rules="mobileRules">
</el-form-item>

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

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

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

function validatePhone(rule, value, callback, type) {
    let regs = {
        phoneDL: /^(\+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, 'phoneDL');
    };
    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;

点击动态添加表单项：

<el-form ref="form" :model="form">
     <el-form-item
         v-for="(contact, index) in form.contacts"
         :key="contact.key"
         :prop="'contacts.' + index + '.value'"
         :rules="mobileRules[index]"
                                        >
     <div class="international-mobile">
         <international-mobile
         style="width:80px;"
         v-if="!contact.contactType"
                                                                        
         @updateInternationalTelephone="updateInternationalTelephone(index)"
                                                    
         :internationalTelephone.sync="contact.internationalTelephone">
        </international-mobile>
        <el-input v-model.trim="contact.value" class="international-telephone" 
             ref='newPhoneMobile'   @keydown.native="prevent($event)" 
          :placeholder="contact.contactType? '请输入邮箱地址': '请输入手机号'"></el-input>
        <span class="pointer-text light-text fr" @click="changeContactType(index)">{{ 
         contact.contactType? '填写手机号' : '填写邮箱' }}</span>
      </div>
                                            
       <el-button
           slot="append"
           icon="minus"
           @click="deleteContact(contact)"
            v-if="form.contacts.length>1"></el-button>
       /el-form-item>
</el-form>
<div class="addContact" @click="addContact">
       <i class="icon-add"></i>
       <span>添加联系方式</span>
</div>

<script>
export default {
    data() {
        return {
            form: {
                contacts: [{
                    value: '',
                    contactType: false,
                    internationalTelephone: '86'
                }],
            },
            // 此处设置成二维数组，以便每个验证对应自己的数组
            mobileRules: [[{
                required: true,
                validator: this.$validate.internationalPhone,
                trigger: 'blur'
            }]]
        }
    },
    methods: {
        updateInternationalTelephone(index) {
            if (this.form.contacts[index].internationalTelephone == '86') {
                this.mobileRules[index][0].validator = this.$validate.internationalPhone;
            } else if (this.form.contacts[index].internationalTelephone == '852') {
                this.mobileRules[index][0].validator =                     
                this.$validate.internationalHKPhone;
            } else if (this.form.contacts[index].internationalTelephone == '886'){
                this.mobileRules[index][0].validator = 
                this.$validate.internationalTWPhone;
            }
            // 获取焦点-以便重新验证
            this.$refs['newPhoneMobile'][index].$el.children[0].focus();
        },
        changeContactType(index) {
            this.form.contacts[index].contactType = 
            !this.form.contacts[index].contactType;
            if (this.form.contacts[index].contactType) {
                this.mobileRules[index].validator = this.$validate.internationalMail;
            } else {
                if (this.form.contacts[index].internationalTelephone == '86') {
                    this.mobileRules[index][0].validator = 
                    this.$validate.internationalPhone;
                } else if (this.form.contacts[index].internationalTelephone == '852') {
                    this.mobileRules[index][0].validator = 
                    this.$validate.internationalHKPhone;
                } else if (this.form.contacts[index].internationalTelephone == '886'){
                    this.mobileRules[index][0].validator =                 
                    this.$validate.internationalTWPhone;
                }
            }
            // 获取焦点-以便重新验证
            this.$refs['newPhoneMobile'][index].$el.children[0].focus();
        },
        //增加联系方式
        addContact() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.form.contacts.push({
                        value: '',
                        key: Date.now(),
                        contactType: false,
                        internationalTelephone: '86'
                    });
                    this.mobileRules.push([{
                        required: true,
                        validator: this.$validate.internationalPhone,
                        trigger: 'blur'
                    }]);
                    this.$nextTick(() => {
                        this.$refs.popover.updatePopper()
                    })
                } else {
 
                }
            });
        },
        //删除联系方式
        deleteContact(item) {
            var index = this.form.contacts.indexOf(item)
            if (index !== -1) {
                this.form.contacts.splice(index, 1)
            }
            this.$nextTick(() => {
                this.$refs.popover.updatePopper()
            })
        },
    }
}
</script>