vue项目中的iview如何验证for循环的输入框、日期选择框,及表单回填验证不通过问题
v-for循环的输入框验证是否必填:
<tr v-if="item.enabled" v-for="(item,index) in formItem.targetList" :key="index"> <td> {{item.enName}} </td> <td align="center"> <FormItem label="" :prop="'targetList.' + index + '.checkMoney'" :rules="{required: true, trigger: 'blur'}"> <Input class="ivu-input-unit transparent w-80p-i" v-model="item.checkMoney" placeholder="请输入"></Input> </FormItem> </td> <td align="center"> <FormItem label="" :prop="'targetList.' + index + '.quantityQuotaPercent'" :rules="{required: true, trigger: 'blur'}"> <Input class="ivu-input-unit transparent w-80p-i" v-model="item.quantityQuotaPercent" placeholder="请输入"></Input> <span class="d-i-b-b ml-12-r fsz-18-r">%</span> </FormItem> </td> <td> <a class="delete-btn-unit" @click="targetFun(item,index)">删除</a> </td> </tr>
双重v-for循环的日期:
1. rules如果设type: "date",就所有的日期都变为必填项,设置required:false也是必填。
2. 不设置type为date,绑定的参数planData需要转换为字符串格式 ,也就是通过getDate(val,indexs,index)转换,就可以根据required的值实现是否必填
代码:
<tr v-for="(items,indexs) in formItem.STEP"> <template v-for="(item,index) in items"> <th class="bg-col-a-2-1"> {{item.itemName}} </th> <td align="center"> <FormItem label="" :prop="'STEP.' + indexs + '.' + index + '.planData'" :rules="{required: item.required, trigger: 'change'}"> <DatePicker class="ivu-date-unit w-210-r" type="date" format="yyyy-MM-dd" placeholder="请选择" v-model="item.planData" @on-change="getDate(item.planData,indexs,index)"></DatePicker> </FormItem> </td> </template> </tr> /** * 获取日期的值 */ getDate(val,indexs,index) { // console.log(val.getFullYear() + "-" + (val.getMonth()+1) + "-" + val.getDate(),indexs,index); this.formItem.STEP[indexs][index].planData = val.getFullYear() + "-" + (val.getMonth()+1) + "-" + val.getDate(); },
解决方法:
1. 将v-model改为:value的方式绑定数据。经验证,发现:value可以回填默认值,但是不能正确的赋值,也就是选中了日期后,获取不到日期
<FormItem label="" :prop="'STEP.' + indexs + '.' + index + '.planData'" :rules="{required: !item.required, trigger: 'change'}"> <DatePicker class="ivu-date-unit w-210-r" type="date" format="yyyy-MM-dd" placeholder="请选择" :value="item.planData" @on-change="getDate(item.planData,indexs,index)"></DatePicker> </FormItem>
2. 处理验证条件 :rules="{required: !item.required, trigger: 'change',pattern: /.+/}"
添加蓝色部分代码即可完美通过验证,并且解决回填不通过验证的问题
<FormItem label="" :prop="'STEP.' + indexs + '.' + index + '.planData'" :rules="{required: !item.required, trigger: 'change',pattern: /.+/}"> <DatePicker class="ivu-date-unit w-210-r" type="date" format="yyyy-MM-dd" placeholder="请选择" v-model="item.planData" @on-change="getDate(item.planData,indexs,index)"></DatePicker> </FormItem>
前端菜鸟一枚,习惯记录平时遇到的一些问题和学习笔记,觉得有用的可以点个支持!有问题的也可以加QQ814878176交流哟 : )