CUD+表单验证

最新推荐文章于 2024-04-11 09:58:04 发布

畅畅子-

最新推荐文章于 2024-04-11 09:58:04 发布

阅读量215

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/zhangchang0516/article/details/124727037

版权

本文介绍了如何使用ElementUI进行CUD（创建、更新、删除）操作，特别是焦点放在Dialog弹出框的实现和表单验证上。详细讲解了Dialog的基本结构、表单的创建、验证规则的定义，以及如何在Vue实例中处理表单数据和验证信息。还涵盖了在关闭Dialog时清空表单数据和验证信息的方法。

摘要由CSDN通过智能技术生成

1.后台数据接口准备

增删改接口

dao:

basedao

action:

2.Dialog弹出框

新增按钮按钮

2.1 基本结构

<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="dialogClose">

<el-form :label-position="labelPosition" :model="bookForm" :rules="rules" ref="bookForm">
...
</el-form>
</el-dialog>

注1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏
:visible.sync="dialogFormVisible"

注2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息；
@close="dialogClose"

3.表单

3.1 基本结构

<el-form :label-position="labelPosition" :model="bookForm" :rules="rules" ref="bookForm">
<el-form-item label="书本编号" :label-width="formLabelWidth">
<el-input v-model="bookForm.id" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
<el-input v-model="bookForm.bookname" autocomplete="off"></el-input>
</el-form-item>
...
</el-form>

注1：:label-position设置表单对齐方式
注2：<el-form :model="bookForm"></el-form>设置表单元素属性双向绑定的对象属性名称

data: function() {
   return {
bookForm: {
       id: null,
       bookname: null,
       price: '',
       booktype: null
   }
};
}

3.2 表单验证

<el-form :model="bookForm" :rules="rules" ref="bookForm">
...
</el-form>

注1：:rules="rules"表单验证定义，只需要通过 rules 属性传入约定的验证规则

//将el-form-item的prop属性设置为需校验的字段名即可,如下：
<el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
<el-input v-model="bookForm.bookname" autocomplete="off"></el-input>
</el-form-item>

//在Vue实例的data属性中定义表单验证规则，如下：
rules: {
   bookname: [
   {required: true,message: '请输入书本名称！',trigger: 'blur'},
   {min: 3,max: 6,message: '长度必须在3-6个字符之间',trigger: 'blur'}
   ],
...
}

注2：有多个表单，怎么在提交进行区分？

我们在rules这里写了对表单的验证规则，但是我们如何在methods里进行指定的表单进行认证，
所以我们一开始就在el-form里写了 ref="ruleForm"，我们在methods里就可以用