devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

el-form中数组(一重数组、二重数组以及多重数组)绑定检验的实例（prop以及rules的赋值）_el-form 数组校验

作者：花生_TL007 | 2024-02-19 05:27:11

赞

踩

el-form 数组校验
友情提示：如果想需要el-table里面每一行的每个字段都需要进行校验的，请参参考这一下文章

ElementUI el-table动态增减行，通过el-from实现el-table行内输入验证-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/snows_l/article/details/134050576?spm=1001.2014.3001.5502

一、一重数组的绑定
提示：

1、每一项el-form-item的prop以及rules的赋值以及data中form的结构(行内样式是为了复制直接看效果)

2、注意看users以及mobile的prop绑定的值不一样的，因此当只有一重数组时这两种写法都是可以的

  1. :prop="'users[' + index + '].userName'"

  1. :prop="'users.' + index + '.mobile'"

结构如下代码所示：
template
  1. <!--
  2.  * @Description: ------ 文件描述 ------
  3.  * @Creater: snows_l snows_l@163.com
  4.  * @Date: 2023-02-12 14:02:00
  5.  * @LastEditors: snows_l snows_l@163.com
  6.  * @LastEditTime: 2023-02-12 14:24:00
  7.  * @FilePath: /vue2-js/src/components/elForm.vue
  8. -->
  9. <template>
  10.   <div class="container-warp">
  11.     <el-form :model="form" ref="form" :rules="rules" label-width="240px" :inline="false" size="normal">
  12.       <el-form-item label="联系人及手机号码">
  13.         <div class="name-phone">
  14.           <div
  15.             style="display: flex; align-items: center"
  16.             class="item"
  17.             v-for="(item, index) in form.users"
  18.             :key="item.id">
  19.             <el-form-item :prop="'users[' + index + '].userName'" :rules="rules.userName">
  20.               <el-input v-model="item.userName" size="small" placeholder="请输入联系人" />
  21.             </el-form-item>
  22.             <el-form-item style="margin: 0 10px" :prop="'users.' + index + '.mobile'" :rules="rules.mobile">
  23.               <el-input v-model="item.mobile" size="small" placeholder="请输入手机号码" />
  24.             </el-form-item>
  25.             <i
  26.               style="font-size: 20px"
  27.               class="icon"
  28.               :class="index == 0 ? 'el-icon-circle-plus-outline' : 'el-icon-circle-close'"
  29.               @click="addUser(index)"></i>
  30.           </div>
  31.         </div>
  32.       </el-form-item>
  33.       <el-form-item>
  34.         <el-button type="primary" @click="onSubmit">立即创建</el-button>
  35.         <el-button>取消</el-button>
  36.       </el-form-item>
  37.     </el-form>
  38.   </div>
  39. </template>
script
  1.  
  2. <script>
  3.   export default {
  4.     name: '',
  5.     data() {
  6.       return {
  7.         form: {
  8.           users: [
  9.             {
  10.               userName: '',
  11.               mobile: null
  12.             }
  13.           ],
  14.           otherInfn: null
  15.         },
  16.         rules: {
  17.           userName: [{ required: true, message: '请输入联系人' }],
  18.           mobile: [{ required: true, message: '请输入手机号' }]
  19.         }
  20.       };
  21.     },
  22.  
  23.     created() {},
  24.  
  25.     methods: {
  26.       onSubmit() {
  27.         console.log('-------- form --------', this.form);
  28.         this.$refs['form'].validate(valid => {
  29.           if (valid) {
  30.             alert('submit!');
  31.           } else {
  32.             console.log('error submit!!');
  33.             return false;
  34.           }
  35.         });
  36.       }
  37.     }
  38.   };
  39. </script>
  40.  
  41. <style scoped>
  42.   .container-warp {
  43.     width: 100%;
  44.     height: 100%;
  45.   }
  46. </style>

二、二重数组的绑定
提示：

1、注意看users以及mobile的prop绑定的值不一样的，因此当只有一重数组时这两种写法都是可以的

  1. :prop="'users[' + index + '].list[' + i + '].attr2'"

  1. :prop="'users.' + index + '.list.' + i + '.attr1'"

结构如下代码所示：
template
  1. <template>
  2.   <div class="container-warp">
  3.     <span style="font-size: 16px; font-weight: 500">form表单的二重数组验证</span>
  4.     <el-form :model="form" ref="form" :rules="rules" label-width="240px" label-position="top" :inline="false" size="normal">
  5.       <div class="pingpu" style="display: flex; justify-content: space-around">
  6.         <el-form-item label="第一层数据1" prop="data1">
  7.           <el-input v-model="form.data1" @input="e => e.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder="请输入" size="normal"></el-input>
  8.         </el-form-item>
  9.         <el-form-item label="第一层数据2" prop="data2">
  10.           <el-input v-model="form.data2" @input="e => e.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder="请输入" size="normal"></el-input>
  11.         </el-form-item>
  12.         <el-form-item label="第一层数据3" prop="data3">
  13.           <el-input v-model="form.data3" @input="e => e.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder="请输入" size="normal"></el-input>
  14.         </el-form-item>
  15.       </div>
  16.       <el-form-item label="基础信息users -- 一重数组">
  17.         <el-button type="primary" size="small" @click="handleUser">添加一个users</el-button>
  18.         <div class="name-phone">
  19.           <!-- 第一重数组 -->
  20.  
  21.           <div class="item" v-for="(item, index) in form.users" :key="item.id">
  22.             <span>用户{{ index + 1 }}</span>
  23.             <div class="user-box" style="margin: 10px 0; padding: 20px; border: 1px solid #999">
  24.               <el-form-item :label="'联系人'" label-position="right" :prop="'users[' + index + '].userName'" :rules="rules.userName">
  25.                 <el-input v-model="item.userName" size="small" placeholder="请输入联系人" />
  26.               </el-form-item>
  27.  
  28.               <el-form-item :label="'手机号'" label-position="right" :prop="'users.' + index + '.mobile'" :rules="rules.mobile">
  29.                 <el-input v-model="item.mobile" size="small" placeholder="请输入手机号码" />
  30.               </el-form-item>
  31.  
  32.               <el-button type="primary" size="small" style="margin: 20px 0 10px 0" @click="handleUserOtherInfor(index)">添加用户{{ index + 1 }}其他信息</el-button>
  33.  
  34.               <!-- 第二重数组 -->
  35.               <div class="other-info" style="border: 1px solid #eee">
  36.                 <el-form-item label="其他信息List -- 二重数组" style="margin: 40px">
  37.                   <div class="other-info-container" style="display: flex" v-for="(single, i) in form.users[index].list" :key="i">
  38.                     <el-form-item style="margin-right: 20px" label="其他信息1" size="normal" :prop="'users.' + index + '.list.' + i + '.attr1'" :rules="rules.attr1">
  39.                       <el-input v-model="single.attr1" size="small" placeholder="请输入其他信息1" />
  40.                     </el-form-item>
  41.                     <el-form-item label="其他信息2" size="normal" :prop="'users[' + index + '].list[' + i + '].attr2'" :rules="rules.attr2">
  42.                       <el-input v-model="single.attr2" size="small" placeholder="请输入其他信息2" />
  43.                     </el-form-item>
  44.                   </div>
  45.                 </el-form-item>
  46.               </div>
  47.             </div>
  48.           </div>
  49.         </div>
  50.       </el-form-item>
  51.       <el-form-item>
  52.         <el-button type="primary" size="small" @click="onSubmit">立即创建</el-button>
  53.         <el-button size="small">取消</el-button>
  54.       </el-form-item>
  55.     </el-form>
  56.   </div>
  57. </template>
script
  1.  
  2. <script>
  3. export default {
  4.   name: '',
  5.   data() {
  6.     return {
  7.       form: {
  8.         data1: '',
  9.         data2: '',
  10.         data3: '',
  11.         users: [
  12.           {
  13.             userName: '',
  14.             mobile: null,
  15.             otherInfn: null,
  16.             list: [{ attr1: null, attr2: null }]
  17.           }
  18.         ],
  19.         otherInfn: null
  20.       },
  21.       rules: {
  22.         data1: [{ required: true, message: '请输入第一层数据1' }],
  23.         data2: [{ required: true, message: '请输入第一层数据2' }],
  24.         data3: [{ required: true, message: '请输入第一层数据3' }],
  25.         userName: [{ required: true, message: '请输入联系人' }],
  26.         mobile: [{ required: true, message: '请输入手机号' }],
  27.         attr1: [{ required: true, message: '请输入其他信息1' }],
  28.         attr2: [{ required: true, message: '请输入其他信息2' }]
  29.       }
  30.     };
  31.   },
  32.  
  33.   created() {},
  34.  
  35.   methods: {
  36.     onSubmit() {
  37.       console.log('-------- form --------', this.form);
  38.       this.$refs['form'].validate(valid => {
  39.         if (valid) {
  40.           alert('submit!');
  41.         } else {
  42.           console.log('error submit!!');
  43.           return false;
  44.         }
  45.       });
  46.     },
  47.     handleUser() {
  48.       this.form.users.push({
  49.         userName: '',
  50.         mobile: null,
  51.         otherInfn: null,
  52.         list: [
  53.           { attr1: null, attr2: null },
  54.           { attr1: null, attr2: null }
  55.         ]
  56.       });
  57.     },
  58.  
  59.     handleUserOtherInfor(index) {
  60.       this.form.users[index].list.push({ attr1: null, attr2: null });
  61.     },
  62.     changeData(e) {
  63.       console.log('-------- e --------', e);
  64.     }
  65.   }
  66. };
  67. </script>

三、效果如如下：(二重数组的效果，就随便弄了下不要在乎样式[/手动狗头])

图1：初始效果

图2：校验的效果

图3：添加用户 -> 添加用户其他信息的效果

三、二重数组vue完整文件（二重数组也包含了一重数组的）

  1. <template>
  2.   <div class="container-warp">
  3.     <span style="font-size: 16px; font-weight: 500">form表单的二重数组验证</span>
  4.     <el-form :model="form" ref="form" :rules="rules" label-width="240px" label-position="top" :inline="false" size="normal">
  5.       <div class="pingpu" style="display: flex; justify-content: space-around">
  6.         <el-form-item label="第一层数据1" prop="data1">
  7.           <el-input v-model="form.data1" @input="e => e.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder="请输入" size="normal"></el-input>
  8.         </el-form-item>
  9.         <el-form-item label="第一层数据2" prop="data2">
  10.           <el-input v-model="form.data2" @input="e => e.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder="请输入" size="normal"></el-input>
  11.         </el-form-item>
  12.         <el-form-item label="第一层数据3" prop="data3">
  13.           <el-input v-model="form.data3" @input="e => e.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" placeholder="请输入" size="normal"></el-input>
  14.         </el-form-item>
  15.       </div>
  16.       <el-form-item label="基础信息users -- 一重数组">
  17.         <el-button type="primary" size="small" @click="handleUser">添加一个users</el-button>
  18.         <div class="name-phone">
  19.           <!-- 第一重数组 -->
  20.  
  21.           <div class="item" v-for="(item, index) in form.users" :key="item.id">
  22.             <span>用户{{ index + 1 }}</span>
  23.             <div class="user-box" style="margin: 10px 0; padding: 20px; border: 1px solid #999">
  24.               <el-form-item :label="'联系人'" label-position="right" :prop="'users[' + index + '].userName'" :rules="rules.userName">
  25.                 <el-input v-model="item.userName" size="small" placeholder="请输入联系人" />
  26.               </el-form-item>
  27.  
  28.               <el-form-item :label="'手机号'" label-position="right" :prop="'users.' + index + '.mobile'" :rules="rules.mobile">
  29.                 <el-input v-model="item.mobile" size="small" placeholder="请输入手机号码" />
  30.               </el-form-item>
  31.  
  32.               <el-button type="primary" size="small" style="margin: 20px 0 10px 0" @click="handleUserOtherInfor(index)">添加用户{{ index + 1 }}其他信息</el-button>
  33.  
  34.               <!-- 第二重数组 -->
  35.               <div class="other-info" style="border: 1px solid #eee">
  36.                 <el-form-item label="其他信息List -- 二重数组" style="margin: 40px">
  37.                   <div class="other-info-container" style="display: flex" v-for="(single, i) in form.users[index].list" :key="i">
  38.                     <el-form-item style="margin-right: 20px" label="其他信息1" size="normal" :prop="'users.' + index + '.list.' + i + '.attr1'" :rules="rules.attr1">
  39.                       <el-input v-model="single.attr1" size="small" placeholder="请输入其他信息1" />
  40.                     </el-form-item>
  41.                     <el-form-item label="其他信息2" size="normal" :prop="'users[' + index + '].list[' + i + '].attr2'" :rules="rules.attr2">
  42.                       <el-input v-model="single.attr2" size="small" placeholder="请输入其他信息2" />
  43.                     </el-form-item>
  44.                   </div>
  45.                 </el-form-item>
  46.               </div>
  47.             </div>
  48.           </div>
  49.         </div>
  50.       </el-form-item>
  51.       <el-form-item>
  52.         <el-button type="primary" size="small" @click="onSubmit">立即创建</el-button>
  53.         <el-button size="small">取消</el-button>
  54.       </el-form-item>
  55.     </el-form>
  56.   </div>
  57. </template>
  58.  
  59. <script>
  60. export default {
  61.   name: '',
  62.   data() {
  63.     return {
  64.       form: {
  65.         data1: '',
  66.         data2: '',
  67.         data3: '',
  68.         users: [
  69.           {
  70.             userName: '',
  71.             mobile: null,
  72.             otherInfn: null,
  73.             list: [{ attr1: null, attr2: null }]
  74.           }
  75.         ],
  76.         otherInfn: null
  77.       },
  78.       rules: {
  79.         data1: [{ required: true, message: '请输入第一层数据1' }],
  80.         data2: [{ required: true, message: '请输入第一层数据2' }],
  81.         data3: [{ required: true, message: '请输入第一层数据3' }],
  82.         userName: [{ required: true, message: '请输入联系人' }],
  83.         mobile: [{ required: true, message: '请输入手机号' }],
  84.         attr1: [{ required: true, message: '请输入其他信息1' }],
  85.         attr2: [{ required: true, message: '请输入其他信息2' }]
  86.       }
  87.     };
  88.   },
  89.  
  90.   created() {},
  91.  
  92.   methods: {
  93.     onSubmit() {
  94.       console.log('-------- form --------', this.form);
  95.       this.$refs['form'].validate(valid => {
  96.         if (valid) {
  97.           alert('submit!');
  98.         } else {
  99.           console.log('error submit!!');
  100.           return false;
  101.         }
  102.       });
  103.     },
  104.     handleUser() {
  105.       this.form.users.push({
  106.         userName: '',
  107.         mobile: null,
  108.         otherInfn: null,
  109.         list: [
  110.           { attr1: null, attr2: null },
  111.           { attr1: null, attr2: null }
  112.         ]
  113.       });
  114.     },
  115.  
  116.     handleUserOtherInfor(index) {
  117.       this.form.users[index].list.push({ attr1: null, attr2: null });
  118.     },
  119.     changeData(e) {
  120.       console.log('-------- e --------', e);
  121.     }
  122.   }
  123. };
  124. </script>
  125.  
  126. <style scoped>
  127. .container-warp {
  128.   padding: 20px;
  129. }
  130. .el-input {
  131.   max-width: 400px;
  132. }
  133. </style>
四、总结：

prop的绑定就有上文提到的这两种方式，因此不管是几重数组都是可以的（当然没有试过三重四重数组， 应该是可以的，当然项目中应该不会出现这种情况）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/112904
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号