最近在项目中遇到的问题,动态添加select选择框,提交时验证选择框是否都选择完毕,用的是iview表单控件,iview官网有个demo,是对输入框进行验证
demo代码如下:
<FormItem
v-for="(item, index) in formDynamic.items"
v-if="item.status"
:key="index"
:label="'Item ' + item.index"
:prop="'items.' + index + '.value'"
:rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
<Row>
<Col span="18">
<Input type="text" v-model="item.value" placeholder="Enter something..."></Input>
</Col>
<Col span="4" offset="1">
<Button @click="handleRemove(index)">Delete</Button>
</Col>
</Row>
</FormItem>
它是遍历的时候,对每个input框进行规制校验,本来我想通过computed对rules进行动态绑定,但是好像没有生效,因为项目进度的关系,我也直接在标签上添加rules
关键代码块
html
<FormItem
v-for="(val,index) in selectArr"
:prop="'selected.'+index"
:rules="{ required: true, message: '请选择教师', trigger: 'change', type:'number'}">
<Select v-model="selected[v]">
<Option :value="val.fkMarkingTeacherId">{{val.teacherName}}</Option>
</Select>
</FormItem>
js
data(){
selected:[]
}
prop验证对应的就是select标签v-model="selected"里面获取的教师id,id为number类,rules的type改为number