<template>
<div>
<el-form :model="ruleForm" label-position="left" label-width="100px" :rules="rules" ref="myRuleForm">
<div v-for="(item,index) in ruleForm.peopleList" :key="index">
<el-form-item
label="姓名"
:prop="'peopleList.'+index+'.peopleName'"
:rules="{ required: true, message: '请输入姓名', trigger: 'blur' }"
>
<el-input
v-model="item.peopleName"
placeholder="请输入姓名"
></el-input>
</el-form-item>
<el-form-item
label="手机"
:prop="'peopleList.'+index+'.peoplePhone'"
:rules="{ required: true, message: '请输入手机', trigger: 'blur' }"
>
<el-input
v-model="item.peoplePhone"
placeholder="请输入手机"
></el-input>
</el-form-item>
<el-form-item
label="电子邮箱"
>
<el-input
v-model="item.peopleEmail"
placeholder="请输入电子邮箱"
></el-input>
</el-form-item>
<el-form-item
label="地址"
>
<el-input
v-model="item.peopleAddress"
placeholder="请输入地址"
></el-input>
</el-form-item>
<el-button @click.prevent="removePeople(item)">删除</el-button>
</div>
<br>
<el-button @click="addPeople">添加联系人</el-button>
<br>
<el-button @click="submitForm('myRuleForm')">提交</el-button>
<el-button @click="clearForm('myRuleForm')">清空</el-button>
</el-form>
</div>
</template>
<script>
export default {
data () {
var checkPhone = (rule, value, callback) => { // 手机号验证
if (!value) {
return callback(new Error('手机号不能为空'));
} else {
const reg = /^1\d{10}$/
if (reg.test(value)) {
callback();
} else {
return callback(new Error('请输入正确的手机号'));
}
}
}
return {
ruleForm: {
peopleList: [
{
peopleName: '',
peoplePhone: '',
peopleEmail: '',
peopleAddress: ''
}
]
},
rules: {
},
}
},
methods: {
addPeople(){
this.ruleForm.peopleList.push({
peopleName: '',
peoplePhone: '',
peopleEmail: '',
peopleAddress: ''
});
},
removePeople(item) {
if(this.ruleForm.peopleList.length==1){
console.log('至少要填写一个');
}else{
var index = this.ruleForm.peopleList.indexOf(item)
if (index !== -1) {
this.ruleForm.peopleList.splice(index, 1)
}
}
},
submitForm(form){
this.$refs[form].validate((valid)=>{
if(valid){
console.log(this.ruleForm);
console.log('可以提交');
}else{
console.log('no no no');
}
})
},
clearForm(form){
this.$refs[form].resetFields();
}
}
};
</script>
<style scoped='scoped' lang='scss'>
</style>
如果姓名跟手机没输入,会错误提示
问题:手机号校验没加上,还不知道怎么写,待研究