SPA项目开发之表单验证&增删改功能_spa框架一个table变了其他的也变了-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_67477525/article/details/126835765

本文介绍了使用Vue.js和ElementUI进行单页面应用（SPA）开发时，如何实现表单验证和增删改功能。在表单验证部分，通过ElementUI的Form组件和rules属性进行数据校验；在增删改功能实现中，详细讲解了新增、编辑和删除操作的逻辑，包括数据回显、区分新增与编辑、以及删除功能的实现。

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

一、表单验证

在elementUI中，Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可

具体的可拜读elementUI官网

1、先找到一个符合需求的表单样式，并在data中添加表单的属性

<!-- 编辑界面 -->
		<el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @before-close="closeDialog">
			<el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
				<el-form-item label="文章标题" prop="title">
					<el-input size="small" v-model="editForm.title" auto-complete="off" placeholder="请输入文章标题"></el-input>
				</el-form-item>
				<el-form-item label="文章内容" prop="body">
					<el-input size="small" v-model="editForm.body" auto-complete="off" placeholder="请输入文章内容"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="closeDialog">取消</el-button>
				<el-button size="small" type="primary" class="title" @click="submitForm('editForm')">保存</el-button>
			</div>
		</el-dialog>

2、添加表单校验规则

可在官网中查找一个表单校验规则rules与el-form表单中的rules相对应，根据自己的需求改吧改吧

rules: {
          title: [{
              required: true,
              message: '请输入活动名称',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          body: [{
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }]
        },