SPA项目开发之CRUD+表单验证

最新推荐文章于 2025-08-12 22:36:33 发布

邂逅于晚风

最新推荐文章于 2025-08-12 22:36:33 发布

阅读量785

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript vue.js css3

本文链接：https://blog.csdn.net/weixin_58670730/article/details/121281880

本文介绍如何使用Element UI实现表单验证，并详细讲解了增加、修改文章的功能实现，包括表单提交和删除操作。涉及规则设定、数据回显与API调用。

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

1.表单验证

<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>

rules定义验证规则

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

2. 增删改功能实现

2.1增加

将表单放入弹出窗体中

<el-dialog :title="titlename" :visible.sync="editFormVisible" width="30%">
			<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>

当点击增加按钮时，打开窗口，默认窗口关闭

handleEdit(){
				this.editFormVisible=true;
				this.titlename='新增窗口';
			},

页面效果

2.2修改

当点击修改时需要将数据进行回显

doEdit(index, row) {
				this.editForm.id = row.id;
				this.editForm.title = row.title;
				this.editForm.body = row.body
				this.editFormVisible = true;
				this.titlename = '编辑窗口';
			},

页面效果

2.3表单提交

新增与修改打开窗口为同一窗口，当点击提交时调用方法不同

submitForm(formName) {
				/* 表单验证 */
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let url;
						/* 判断ID,达到方法调用判断 */
						if (this.editForm.id == 0) {
							url = this.axios.urls.SYSTEM_ARTICLE_ADD;
						} else {
							url = this.axios.urls.SYSTEM_ARTICLE_EDIT;
						}
						/* 发送请求,表单参数 */
						this.axios.post(url, this.editForm).then((response) => {
							console.log(response);
							this.clearData();
							this.search();
						}).catch(function(error) {
							console.log(error);
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},

2.4修改

deleteUser(index, row){
				let url=this.axios.urls.SYSTEM_ARTICLE_DEL;
				 this.editForm.id=row.id;
				this.axios.post(url, this.editForm).then((response) => {
					console.log(response);
					this.clearData();
					this.search();
				}).catch(function(error) {
					console.log(error);
				});
			},