iview 表单验证

最新推荐文章于 2023-11-17 15:23:33 发布

@柱子

最新推荐文章于 2023-11-17 15:23:33 发布

阅读量708

点赞数

分类专栏： iview vue 文章标签：后端 vue.js

本文链接：https://blog.csdn.net/A_LL_IS_WELL/article/details/111227468

版权

iview 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

iview 表单验证

在使用iview表单验时，由于没有仔细阅读文档导致数组等类型虽然有值但是提示验证失败的问题，特此记录一下
iview表单验证可能是默认string类型（也有可能是别的原因）具体array date使用如下
以下代码来自官方文档：

<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
    <FormItem label="Name" prop="name">
        <Input v-model="formValidate.name" placeholder="Enter your name"></Input>
    </FormItem>
    <FormItem label="E-mail" prop="mail">
        <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input>
    </FormItem>
    <FormItem label="City" prop="city">
        <Select v-model="formValidate.city" placeholder="Select your city">
            <Option value="beijing">New York</Option>
            <Option value="shanghai">London</Option>
            <Option value="shenzhen">Sydney</Option>
        </Select>
    </FormItem>
    <FormItem label="Date">
        <Row>
            <Col span="11">
                <FormItem prop="date">
                    <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
                </FormItem>
            </Col>
            <Col span="2" style="text-align: center">-</Col>
            <Col span="11">
                <FormItem prop="time">
                    <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
                </FormItem>
            </Col>
        </Row>
    </FormItem>
    <FormItem label="Gender" prop="gender">
        <RadioGroup v-model="formValidate.gender">
            <Radio label="male">Male</Radio>
            <Radio label="female">Female</Radio>
        </RadioGroup>
    </FormItem>
    <FormItem label="Hobby" prop="interest">
        <CheckboxGroup v-model="formValidate.interest">
            <Checkbox label="Eat"></Checkbox>
            <Checkbox label="Sleep"></Checkbox>
            <Checkbox label="Run"></Checkbox>
            <Checkbox label="Movie"></Checkbox>
        </CheckboxGroup>
    </FormItem>
    <FormItem label="Desc" prop="desc">
        <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
    </FormItem>
    <FormItem>
        <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
        <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
    </FormItem>
</Form>

画重点：
在这里插入图片描述