14 使用Vue + el-form + rules实现图书信息录入功能实战

已于 2023-07-25 11:15:17 修改
阅读量2.4k 收藏 39
点赞数 41
分类专栏： Vue + SpringBoot前后端分离项目实战 文章标签： vue.js javascript ecmascript spring boot 前端 elementui el-form
于 2023-07-18 00:42:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xingyu_qie/article/details/131777166
版权
本文介绍了使用Vue、ElementUI的el-form和rules组件实现图书信息录入功能，详细讲解了前端布局、值的一一对应、el-form的验证规则以及图片上传验证，提供了一个完整的图书录入前端实现过程。

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

前言 

上节回顾

转眼2023年已经过去一半了，我咋记得2022年刚过去呢，有时候在前端打版本的时候我还不小心写成2022啥啥啥呢，写完才发现自己自己写错了，应该是2023，真是时光一去不复回，往事只能回味啊。

上一节为了给图书录入功能模块打基础，单独写了一篇Vue + FormData + axios的博客，我们通过对上传图片的DOM布局，上传事件的注意事项，还有在图片上传功能中，axios是如何支持的，做了讲解，不明白上下文的小伙伴可以回过头去看一看 ： 使用Vue + FormData + axios实现图片上传功能实战

本节介绍

这一小节是本专栏的第12篇实战博客了，这一小节对前端初学者，和Vue实战项目不多，没有用过el-form + rules验证的小伙伴特别友好，可以说看过这篇博客，基本就算会了，即便有所遗漏，相信也能快速找到问题所在。这一小节主要内容是图书信息录入的前端布局，el-form的使用，rules验证，再配合时间组件、el-select选择组件、图片上传信息的验证。等把这一节学完了，这一节就直接开始图书信息录入的操作了。

目录

前言 

一、录入信息前端布局

1. 面包屑

2. 录入信息区域

3. 底部按钮区域

二、值的 一 一对应

1.  数据依赖的值

2. rules验证添加

3. el-select成功后的验证

 4. 图片上传成功后的验证

三、图书类型枚举值

了解本专栏 订阅专栏 解锁全文 超级会员免费看
vue2 -- el-form组件动态增减表单项及表单项验证
King Saj
11-06 480
在数据录入场景（如订单信息录入）中，可根据实际情况（如商品种类增加）动态添加表单项（如商品相关信息）。包含必填项验证和数据格式验证（如邮箱、电话格式），防止错误数据提交。// 此处执行错误的逻辑。// 执行父组件回调。
15 基于Vue + 数据组装 + axios请求接口 实现图书信息提交功能实战
xingyu_qie的专栏
07-18 2493
在上一节验证数据的基础上，使用axios + 数组组装进行图书信息录入的功能实战
Vue中Form表单中添加Rules规则
C___man的博客
03-24 2315
1、写入HTML <el-form :model="pageForm" label-width="80px" :rules="pageFormRules" ref="pageForm"> <el-form-item label="文档部门" prop="archiveApartment"> <el-input v-model="pageForm.archiveApartment" auto-complete="off" ></el-in
vue 制作一个简单的录入功能
dasdsadsaczx的博客
07-14 716
<el-form :model="form" ref="form" :rules="rules"> <div class="mec-form-header"> <div class="sensition-wrap-content"> <span class="sensition-wrap-title">基础信息</span> <div class="mec-input-to.
Vue表单组件el-form校验规则rules，条件判断rules表单验证显示必填或非必填
最新发布
Aotman_的博客
04-14 724
在使用 Element UI（一个基于 Vue 的前端框架）的表单验证功能时，你可能想要实现一个规则，使得某些字段在特定条件下成为必填项，或者在满足某些条件时不允许为空。这通常通过自定义校验规则来实现。
利用SpringBoot和vue+elementui做一个简单的书本信息管理系统
m0_68211831的博客
11-19 1497
el-form-item prop="bookname" label="书籍名称" :label-width="formLabelWidth">
Vue表单组件el-form校验规则rules属性
2203_75372944的博客
10-18 2360
rules是一个对象，其中每个键对应表单中的一个字段名，值是一个数组，数组中的每个元素代表对该字段的一个校验规则。
Vue3表单组件el-form校验规则rules属性
李长渊的博客
06-13 4815
Vue3表单组件el-form校验规则rules属性
vue3+element-plus 识别表单身份证获取到年龄、出生日期、性别
weixin_50041614的博客
08-16 2067
vue3+element-plus 识别表单身份证获取到年龄、出生日期、性别
VUE使用el-ui关于el-table添加输入框自定义校验（VUE专栏二）
weixin_40690763的博客
06-03 1541
如图所示，在table表中，输入框填入后提交，校验输入框 <template> <el-form :model="request" ref="request" :rules="rules" class="demo-ruleForm"> <el-table :data="request.prodlist" style="width: 100%;mar...
VUE el-form表单中rules校验方法实现
weixin_44078774的博客
11-24 2123
在el-form中正确使用rules校验是非常重要的，rules使用不当容易出现规则不生效、规则一直被触发等各种现象（如错误信息一直提示不得为空）。下面记录了常见的rules实现方式，以做参考。
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
Vue中rules效验规则的使用和常见效验规则
a404352329的博客
11-23 9148
使用语法：{validator:验证方法,trigger:验证触发}
Vue中rules表单验证（常用）
热门推荐
lzzw的学习之路
11-19 4万+
vue的rules用法及自带的校验规则和常用正则表达式校验
el-form自定义规则rules——validate的使用 & 小红心不出现解决方案
weixin_44867717的博客
07-03 1万+
el-form
Vue-From表单校验步骤以及规则
weixin_54902466的博客
04-19 6745
Vue-From表单校验步骤以及规则 文章目录前言一、表单校验的步骤二、代码演示1.引入库2.读入数据总结 前言 提示：本章技术分享前端框架Vue中最常见的from表单验证步骤以及规则 提示：本章节主要是根据vue框架中能够的element-ui组件库为例进行编写 一、表单校验的步骤 定义验证规则 配置模板，应用规则 给表单设置 rules 属性传入验证规则 给表单设置model属性传入表单数据 给表单中的元素（Form-Item ）设置 prop 属性，其值为设置为需校验的字段名 手动兜底
vue 实现动态表单点击新增 增加一行输入框
fury的博客
03-16 4429
除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则。
vue 动态添加form表单
weixin_38673922的博客
04-18 6615
一、效果图 二、代码块 <template> <!-- 动态添加form表单--> <div class="hello"> <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" /> <!-- 动态表单增加 --> <div v-for="(item,index) in list"
vue el-form表单rule校验（特殊字符、中文、数字等）
tutouxiaoyaonie的博客
07-29 7764
vue el-form表单rule校验（特殊字符、中文、数字等）
el-form动态添加表单校验
01-03
### 如何在 `el-form` 中动态添加表单校验规则 为了实现 `el-form` 的动态校验规则，在定义初始的 `rules` 对象时可以预留一些灵活性，以便后续能够向特定字段追加新的验证条件。当需要更新某个输入项的校验逻辑时，可以通过修改 Vue 实例中的数据属性来完成这一操作。 对于基于数组渲染的情况，假设有一个名为 `items` 的列表用于通过 `v-for` 循环生成多个 `el-form-item` 元素，并且希望针对这些条目设置个性化的检验标准，则可以在 JavaScript 部分维护一个映射关系，该映射关联每一条记录与其对应的验证器集合[^1]。 下面是一个具体的例子展示怎样做到这一点： ```javascript // 定义初始的数据模型和默认规则 data() { return { registerForm: { items: [] }, // 假设这是你要收集的信息结构体 rules: {} // 初始化为空的对象，稍后会填充实际规则 }; }, methods: { addFormItem(itemIndex, newRule) { const key = `items.${itemIndex}.value`; // 构建唯一的 prop 键名 this.$set(this.rules[key], 'push', [ ...this.rules[key] || [], // 如果已有规则则保留原有规则并扩展新规则 newRule // 插入的新规则 ]); // 更新视图上的 prop 属性以反映最新的规则变化 this.$nextTick(() => { this.$refs.form.validateField(key); // 手动触发指定域的重新验证 }); } } ``` 在此基础上，HTML 模板部分应当如下所示配置： ```html <template> <el-form ref="form" :model="registerForm" :rules="rules"> <!-- 使用 v-for 来遍历 items 数组 --> <div v-for="(item, index) in registerForm.items" :key="index"> <el-row> <el-col :span="8"> <el-form-item :label="'Item' + (index+1)" :prop="`items.${index}.value`"> <el-input v-model="item.value"></el-input> </el-form-item> </el-col> </el-row> </div> <!-- 提交按钮或其他控件可放置于此处 --> </el-form> </template> ``` 上述代码片段展示了如何利用 Vue.js 和 Element UI 创建支持动态调整校验策略的多项目录入界面。每当调用 `addFormItem()` 方法并向其传递目标索引以及新增的约束条件之后，就会自动刷新相应的区域并且立即执行一次局部有效性检查[^2]。
评论 50
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

经海路大白狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值