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

最新推荐文章于 2023-12-27 00:29:14 发布

夜里的一叶孤舟

最新推荐文章于 2023-12-27 00:29:14 发布

阅读量535

点赞数

CC 4.0 BY-SA版权

文章标签：前端 elementui 前端框架 vue.js javascript

本文链接：https://blog.csdn.net/weixin_56069070/article/details/121355066

本文主要介绍了在SPA项目中如何实现CRUD操作和表单验证。首先讲解了表单验证的三个步骤：导入组件、定义rules及调用规则。接着详细阐述了增删改功能的实现，包括根据ID判断操作类型、前后端数据交互以及删除功能。最后展示了运行结果。

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

前言

spa项目完成登录注册_笑看人生十余载的博客-CSDN博客

(61条消息) spa项目开发首页导航&&左侧菜单_笑看人生十余载的博客-CSDN博客

spa项目开发首页导航&&左侧菜单_笑看人生十余载的博客-CSDN博客

即前三篇篇博客的基础上在进行开发，今天要分享的知识是spa项目开发之CRUD+表单验证

码字不易，转载请说明！！！

一、表单验证

①导入相关组件

②将rules加入表单验证（data里面定义规则）

一、表单验证

①导入相关组件

<!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="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>

②将rules加入表单验证（data里面定义规则）

rules: {
          title: [{
              required: true,
              message: '请输入文章标题',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 5,
              message: '长度在 3 到 5 个字符',
              trigger: 'blur'
            }
          ],
          body: [{
            required: true,
            message: '请选文章内容',
            trigger: 'blur'
          }]
        }
      }
    },

③调动规则

 submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }

完整代码

Articles.vue

<template>
  <div>
    <!-- 只是文章列表组件 -->
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="formInline.title" placeholder="文章标题"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd()">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 列表 -->
    <el-table size="small" :data="listData" highlight-current-row border element-loading-text="拼命加载中"
      st