vueelementUI表单校验的实现代码（多层嵌套）-创新互联

嵌套对象的校验

站在用户的角度思考问题，与客户深入沟通，找到怀柔网站设计与怀柔网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、成都做网站、企业官网、英文网站、手机端网站、网站推广、域名注册、网站空间、企业邮箱。业务覆盖怀柔地区。

项目中使用的vue+elementUI进行开发，已经用了有一段时间了，感觉表单校验是每一个前端开发人员都避免不了的需求。在一些前端可以自行校验的情况下，先通过前端校验，校验不通过不发送请求，直到满足校验规则，再发送请求给后端，从而提升用户体验。

elementUI对表单的校验有自己的方法，要求传入model的必须为一个对象。但如果数据结构比较复杂，对象里面又嵌套对象，该如何校验？本文给出多层对象嵌套的方法。

example

<template>
 <el-form :model="formData" :rules="formRule" ref="formData" label-width="100px">
    <el-form-item prop="name" label="姓名">
      <el-input v-model="formData.name" ></el-input>
    </el-form-item>
    <el-form-item prop="password" label="密码">
     <el-input v-model="formData.password" ></el-input>
    </el-form-item>
    <el-form-item prop="user.tel" label="手机号" >
     <el-input v-model="formData.user.tel" ></el-input>
    </el-form-item>
    <el-form-item prop="phones[0].model" label="手机号">
     <el-input v-model="formData.phones[0].model"></el-input>
    </el-form-item>
    <el-form-item v-for="(phone, index) in formData.phones" :label="phone.brand" :key="phone.brand" :prop="'phones.' + index + '.model'" :rules="{
     required: true, message: 'model不能为空', trigger: 'blur'
     }">
      <el-input v-model="phone.model"></el-input>
      <el-form :model="formData.phones[index]" label-width="100px">
         <el-form-item v-for="(item, index1) in formData.phones[index].arr" :key="index1" :prop="'arr.' + index1 + '.data1'" label="data1" :rules="{
         required: true, message: 'data1不能为空', trigger: 'blur'
         }">
           <el-input v-model="item.data1"></el-input>
         </el-form-item>
      </el-form>
    </el-form-item>
  </el-form>
  <el-button @click="handleSubmit">提交</el-button>  
</template>

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。