iOS input框无法输入问题 input输入框不能为空

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

由于我这个地方需要在点击“添加”按钮时，会添加重复的内容。因此我整个结构使用的是：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结构代码修改如下：

<div v-for="(form,formIndex) in ruleForm" :key="formIndex">
	<el-form :model="form" :rules="rules" ref="ruleForm" label-width="90px" class="demo-ruleForm">
		 <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 />
	</el-form>
</div>

问题解决！！！

注意两点：

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