vue+element,循环多个el-form-item,并校验
<template>
<div style="width: 500px;">
<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-dynamic">
<el-form-item label="手机号" prop="phone">
<el-input v-model.number="form.phone"></el-input>
</el-form-item>
</el-form-item>
<div style='display:felx;align-items: center;'>
<el-form-item
v-for="(item, index) in form.list"
:label="'关联号码' + (index+1)"
:key="index"
:prop="'list.' + index + '.value'"
:rules="{required: true, message: '关联手机号不能为空', trigger: 'blur',validator: checkPhone}"
>
<div style='display:felx;align-items: center;justify-content: space-between;'>
<el-input v-model="item.value" style='width: 300px;'></el-input>
<el-button @click.prevent="removeItem(item)">删除</el-button>
</div>
</el-form-item>
</div>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
<el-button @click="addItem">新增</el-button>
<el-button @click="resetForm('form')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
var checkPhone = (rule, value, callback) =>{
if (!value) {
return callback(new Error('手机号不能为空'));
} else {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
if (reg.test(value)) {
callback();
} else {
return callback(new Error('请输入正确的手机号'));
}
}
};
export default {
data() {
return {
form: {
list: [],
phone: ''
},
isAdd:false,
rules: {
phone:[
{ validator: checkPhone, trigger: 'blur',required: true, message: '手机号不能为空' }
],
}
};
},
methods: {
checkPhone(rule, value, callback){
if (!value) {
return callback(new Error('手机号不能为空'));
} else {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
if (reg.test(value)) {
callback();
} else {
return callback(new Error('请输入正确的手机号'));
}
}
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let phoneList = []
let params = {}
if(this.isAdd){
this.form.list.forEach((v,i)=>{
if(this.form.phone != v.value){
if(phoneList.indexOf(v.value) == -1){
phoneList.push(v.value)
phoneList = phoneList.toString()
params = {
phone:this.form.phone+','+phoneList
}
}else{
params = {}
this.$message.error('手机号不可重复');
return false
}
}else{
params = {}
this.$message.error('手机号不可重复');
return false
}
})
}else{
params = {
phone:this.form.phone
}
}
console.log(params)
} else {
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
removeItem(item) {
var index = this.form.list.indexOf(item)
if (index !== -1) {
this.form.list.splice(index, 1)
}
if(this.form.list==0){
this.isAdd = false
}
},
addItem() {
this.isAdd = true
if(this.form.list.length>2){
this.$message.error('最多可关联3个手机号');
return false
}else{
this.form.list.push({
value: '',
key: Date.now()
})
}
}
}
}
</script>