element_form_校验、表单、嵌套、多层

1、标签校验

<el-form-item label="标题" :prop="{ required: true, message: '请输入标题', trigger: 'blur' }"> <el-input v-model="ruleForm.titles" placeholder="请输入标题"> titles: [ { required: true, message: '请输入标题', trigger: 'blur' }, { min: 3, max: 100, message: '长度在 3 到 100 个字符', trigger: 'change' } ], }; 

3、对象嵌套校验

<el-form-item label="姓名" prop="user.name"> 'user.name': [ { required: true, message: '姓名不能为空', trigger: 'blur' } ] }; 

4、数组对象嵌套校验

<div v-if="ruleForm.status==5||ruleForm.status==6"> <div class="content_item" v-for="(item,i) in ruleForm.contents" :key="item.id"> <div> <span>内容：{{item.id}} content: [ { required: true, message: '请输入内容', trigger: 'blur' }, { min: 10, max: 100, message: '长度在 10 到 100 个字符', trigger: 'change' } ] }; 

5、参考文章及完整代码

5.1、参考文章 5.2、gitee(码云) - mj01分支 - dataCollect文件夹