vue中elment-ui添加表单验证规则,以及动态增加的表单校验

一、表单格式固定的添加表单验证

<template>
  <el-form ref="addForm" :model="form" label-width="100px" :rules="addRules">
     <el-form-item label="名称"  prop="name" >
        <el-input v-model="addForm.telNumber"></el-input>
     </el-form-item>
  </el-form>
</template>

data () {
    return {
      addForm: {
        name:'',//名称
      },
    addRules: {
        name:[{ required: true, message: "名称不能为空", trigger: "blur" }],
    }
  }
}

二、动态增加表单,添加表单验证

<template>
 <el-form ref="form" :model="addForm" label-width="100px" :rules="addRules">
     <el-form-item v-for="(item,index) in addForm.nameList" 
                   label="名称数组对象"
                   :prop="'nameList.'+ index +'.name'"
                   :rules="addRules.name">
        <el-input v-model="item.name"></el-input>
     </el-form-item>
 </el-form>
</template>

data () {
    return {
      addForm: {
        nameList:[
            {name:''}
        ]
      },
      addRules: {
        name:[{ required: true, message: "名称不能为空", trigger: "blur" }],
    }
  }
}

猜你喜欢

转载自blog.csdn.net/m0_69257679/article/details/132607312