elementUi——form表单中input组件输入内容后依旧提示不能为空(v-for循环遍历)

待我称王封你为后i 2022-10-05 08:51 1294阅读 0赞

最近在做后台管理系统时，发现了一个`form`表单中`rules`表单校验的问题：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
由于我这个地方需要在点击“添加”按钮时，会添加重复的内容。因此我整个结构使用的是：`v-for`循环遍历，又因为我需要对单价一项进行校验（必填和数字类型的校验），单价一项的`prop`不具有唯一性，因此考虑到规则校验，所以将规则写在行间。

`html`结构代码如下：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" class="demo-ruleForm">
    	<div v-for="(form,formIndex) in ruleForm" :key="formIndex">
    	     <div class="itemWrap">
                 <el-form-item label="采购单号" prop="purchaseOrderNo">
                     <el-input v-model.trim="form.purchaseOrderNo" size="mini" placeholder="请输入采购单号" clearable></el-input>
                 </el-form-item>
                 <el-form-item label="采购计划Id" prop="planId">
                     <el-input v-model.trim="form.planId" size="mini" placeholder="请输入采购计划Id" clearable></el-input>
                 </el-form-item>
                 <el-form-item label="供应商Id" prop="supplierId">
                     <el-input v-model.trim="form.supplierId" size="mini" placeholder="请输入供应商Id" clearable></el-input>
                 </el-form-item>
                 <el-form-item label="供应商名称" prop="supplierName">
                     <el-input v-model.trim.number="form.supplierName" size="mini" placeholder="请输入供应商名称" clearable></el-input>
                 </el-form-item>
             </div>
             <div class="itemWrap">
                 <el-form-item label="自营供应商" prop="userId">
                     <el-input v-model.trim="form.userId" size="mini" placeholder="请输入自营供应商" clearable></el-input>
                 </el-form-item>
                 <el-form-item label="采购人" prop="userName">
                     <el-input v-model.trim="form.userName" size="mini" placeholder="请输入采购人" clearable></el-input>
                 </el-form-item>
                 <el-form-item label="商品Id" prop="productId">
                     <el-input v-model.trim="form.productId" size="mini" placeholder="请输入商品Id" clearable></el-input>
                 </el-form-item>
                 <el-form-item label="采购数量" prop="productNum">
                     <el-input v-model.trim.number="form.productNum" size="mini" placeholder="请输入采购数量" clearable></el-input>
                 </el-form-item>
             </div>
             <div class="itemWrap">
                 <el-form-item label="WMS入库单" prop="WMS_InnerNo">
                     <el-input v-model.trim.number="form.WMS_InnerNo" size="mini" placeholder="请输入WMS入库单" clearable></el-input>
                 </el-form-item>
                 <el-form-item label="已出库数量" prop="outNum">
                     <el-input v-model.trim.number="form.outNum" size="mini" placeholder="请输入已出库数量" clearable></el-input>
                 </el-form-item>
                 <el-form-item label="单价" prop="unitPrice" :rules="[{ required: true, message: '单价不能为空',trigger: 'blur'},{ type: 'number', message: '单价必须为数字',trigger: ['blur', 'change'] } ]">
                     <el-input v-model.trim.number="form.unitPrice" size="mini" autocomplete="off" placeholder="请输入单价" clearable></el-input>
                 </el-form-item>
                 <el-form-item label="交期" prop="deliveryDate">
                     <el-date-picker v-model="form.deliveryDate" type="date" placeholder="选择交期" size="mini" clearable></el-date-picker>
                 </el-form-item>
             </div>
             <div class="itemWrap">
                 <el-form-item label="备注" prop="note" style="flex:1;">
                     <el-input type="text" v-model.trim="form.note" size="mini" style="width: 100%;" placeholder="请输入备注" clearable></el-input>
                 </el-form-item>
                 <div style="margin-left:10px;margin-top:-8px;width:180px;flex-shrink:0;">
                     <el-button type="primary" size="mini" plain icon="el-icon-circle-plus-outline" @@click="addForm">添加</el-button>
                     <el-button type="primary" v-if="formIndex!=0" size="mini" plain icon="el-icon-remove-outline" @@click="deleteForm(formIndex)">删除</el-button>
                 </div>
             </div>
             <hr />
    	</div>
    </el-form>

单价部分的代码单独抽离出来如下：

<el-form-item label="单价" prop="unitPrice" :rules="[{ required: true, message: '单价不能为空',trigger: 'blur'},{ type: 'number', message: '单价必须为数字',trigger: ['blur', 'change'] } ]">
        <el-input v-model.trim.number="form.unitPrice" size="mini" autocomplete="off" placeholder="请输入单价" clearable></el-input>
    </el-form-item>

首先，我之前并没有注意到`trigger`规则校验的触发条件可以写成数组的形式，这个算是一个新的知识补充。温故而知新，说的就是这个了……

其次，还有一个需要注意的地方，`input`组件默认的输入框内容的类型是`string`字符串，如果要设置为`number`，则可以在`v-model`中加个后缀`number`，则可以将输入框的内容类型改为`number`数字类型。这个类型也可能是校验失败的一个原因。

但我这边并不是这个问题，百度上也有很多提到`prop`指定的名称与`rules`规则中指定的不一样，因为我这次是写在行间，因此这个`prop`并不影响规则校验。

所以排除了很多问题后（类型和`prop`指定），还是有这个校验的问题。

最后偶然间发现了问题，就是不要在`form`中写`v-for`，要在`form`外面加`v-for`，`html`结构代码修改如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
问题解决！！！

注意两点：

1.  如果是通过`v-for`循环遍历时，可以给`el-form-item`添加`v-for`遍历，也可以给整个`form`外面添加`v-for`遍历
2.  不要在`form`里面添加其他标签(比如`div`)的`v-for`循环遍历，否则校验会出问题

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221005/7913f3df4546493a86ad81d8f91aae79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221005/171d5acccf464557ad491284de5dd556.png