vue给动态增加删除的表单,添加表单验证规则

vue添加表单验证规则,分为两种,一种是表单格式固定的,另一种是动态增加删除列表的表单

• 表单格式固定的添加表单验证

form表单对象内容格式如下:
     form:{
        telNumber:''
     }

form表单列表格式如下:
 <el-form ref="form" :model="form" label-width="100px" :rules="rules">
     <el-form-item label="手机号码"
                   prop="telNumber">
        <el-input v-model="form.telNumber"></el-input>
     </el-form-item>
 </el-form>

rules对象如下:
    rules:{
        telNumber:[{requrie:true,message:'手机号码不能为空!',trigger:['blur','change']}]
    }

• 动态增加删除表单,添加表单验证

form表单对象内容格式如下:
    form:{
        telNumber:[{value:''}]
    }

form表单列表格式如下:
 <el-form ref="form" :model="form" label-width="100px" :rules="rules">
     <el-form-item v-for="(item,index) in form.telNumber" 
                   label="手机号码"
                   :prop="'telNumber.'+ index +'.value'"
                   :rules="rules.telNumber">
        <el-input v-model="item.value"></el-input>
     </el-form-item>
 </el-form>

rules对象如下:
    rules:{
        telNumber:[{requrie:true,message:'手机号码不能为空!',trigger:['blur','change']}]
    }

注意:prop属性,只与获取到具体的值挂钩(如果哪个属性获取到具体的值,就使用哪个属性)