我遇到了一个问题,在动态增加表单校验时,增加第二个校验总是不通过,结果发现,我增加的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>