iview表单提交系列问题

最新推荐文章于 2025-06-07 19:00:01 发布

原创最新推荐文章于 2025-06-07 19:00:01 发布 · 7.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#iview #表单验证

本文探讨了使用iview框架时遇到的表单提交系列问题，包括重置表单时上传图片未清空、表单验证的设置方法、FormItem的prop绑定以及在验证select和输入邮箱、电话号码时遇到的错误。通过分析，提供了对应的解决方案。

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

1 重置的时候上传图片未清空

 <Upload ref="upload" action="http://10.0.0.4:8004/uploadPic">
 <Button type="ghost" icon="ios-cloud-upload-outline">上传    </Button>
 </Upload>
 this.$refs[name].resetFields();

2 表单验证

给 Form 设置属性 :rules=”ruleValidate” :model=”formValidate” ref=”formValidate”
FormItem的prop指向v-model，

 <FormItem label="公司：" prop="name">
    <Input v-model="formValidate.name" placeholder="请输入">       </Input>
 </FormItem>

3.iview进行表单验证select时候验证失败的问题
由于没有写type属性

messageFrequency: [{
          required: true,
          message: '不能为空',
          trigger: 'blur',
          type: 'number', /／不生效的原因是没有写这行
        }],
adEnd: [{
          required: true,
          message: '不能为空',
          trigger: 'blur',
          type: 'date',
        }],

iview验证邮箱

email: [{
          required: true,
          message: '不能为空',
          trigger: 'blur',
        }, {
          type: 'string',
          pattern: /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/,
          message: '请输入正确的邮箱地址',
          trigger: 'blur',
        }],

5 iview验证电话号码

phone: [{
          required: true,
          message: '不能为空',
          trigger: 'blur',
        }, {
          type: 'string',
          pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
          message: '请输入正确的电话',
          trigger: 'blur',
        }],