iview 动态校验表单- 多个输入框分别校验

最新推荐文章于 2022-09-01 17:05:11 发布

白得发亮的小白

最新推荐文章于 2022-09-01 17:05:11 发布

阅读量1.8k

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_44116164/article/details/124383486

版权

本文展示了如何在使用iview时，通过调整模板结构，为多个动态生成的Input输入框分别设置独立的校验规则，确保每个输入框在提交时能进行单独的验证，从而提高表单数据的准确性和完整性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px">
        <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>
        <FormItem>
            <Row>
                <Col span="12">
                    <Button type="dashed" long @click="handleAdd" icon="md-add">Add item</Button>
                </Col>
            </Row>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formDynamic')">Submit</Button>
            <Button @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
</template>

iview自带用循环来动态校验输入框，但循环多个input会同时加上校验规则。

可以改为这样

<template>
    <Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px">
        <FormItem
                v-for="(item, index) in formDynamic.items"
                v-if="item.status"
                :key="index"
                :label="'Item ' + item.index">
            <Row>
                <Col span="18">
                  <FormItem
                    :prop="'items.' + index + '.value'"
                    :rules="{required: true, message: 'Item1 不能为空', trigger: 'blur'}">
                    <Input type="text" v-model="item.value" placeholder="Enter something..."></Input>
                  </FormItem>
                </Col>
                <Col span="18" style="margin-top:20px">
                    <FormItem
                    :prop="'items.' + index + '.value1'"
                    :rules="{required: true, message: 'Item2 也不能为空', trigger: 'blur'}">
                    <Input type="text" v-model="item.value1" placeholder="Enter something..."></Input>
                  </FormItem>
                </Col>
                <Col span="18" style="margin-top:20px">
                    <Input type="text" v-model="item.value2" placeholder="Enter something..."></Input>
                </Col>
                <Col span="4" offset="1">
                    <Button @click="handleRemove(index)">Delete</Button>
                </Col>
            </Row>
        </FormItem>
        <FormItem>
            <Row>
                <Col span="12">
                    <Button type="dashed" long @click="handleAdd" icon="md-add">Add item</Button>
                </Col>
            </Row>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formDynamic')">Submit</Button>
            <Button @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</Button>
        </FormItem>
    </Form>
</template>