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

前言 

上节回顾

转眼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. 图片上传成功后的验证

三、图书类型枚举值