表单验证
Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，
并将Form-Item的prop属性设置为需校验的字段名即可
<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>
今天就写了一个并不是很难的正则 可以去element官网查看更多（https://element.eleme.cn/#/zh-CN/component/form）
rules: {
title: [{
required: true,
message: '请输入文章标题',
trigger: 'blur'
}],
body: [{
required: true,
message: '请输入文章内容',
trigger: 'blur'
},
{
min: 5,
max: 10,
message: '长度在 5 到 10 个字符',
trigger: 'blur'
}
],
}
有多个表单，怎么在提交进行区分？
-
我们在rules这里写了对表单的验证规则，但是我们如何在methods里进行指定的表单进行认证，
所以我们一开始就在el-form里写了 ref="ruleForm"，我们在methods里就可以用 - 清空表单验证信息
this.$refs[formName].resetFields();
数据交互（与后台连接并且调用相关方法）
今天的都写在一个页面只是分出来单独解释一下是干嘛用的
完整代码（前端）
<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="add">添加</el-button> </el-form-item> </el-form> <!-- 列表--> <el-table size="small" :data="listData" style=" 100%;" border max-height="450" element-loading-text="拼命加载中"> <el-table-column sortable prop="id" label="ID" width="300"></el-table-column> <el-table-column sortable prop="title" label="文章标题" width="300"></el-table-column> <el-table-column sortable prop="body" label="文章内容" width="300"></el-table-column> <el-table-column align="center" label="操作" min-width="300"> <template slot-scope="scope"> <el-button size="mini" @click="edit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页条 --> <el-pagination style="margin-top: 20px;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="formInline.rows" layout="total, sizes, prev, pager, next, jumper" :total="pageBean.total"> </el-pagination> <!-- 编辑界面 --> <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> </div> </template> <script> export default { data() { return { listData: [], pageBean: { total: 0 }, formInline: { title: '', page: 1, rows: 10, }, editFormVisible: false, title: '', editForm: { body: '', title: '', id:0, }, rules: { title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }], body: [{ required: true, message: '请输入文章内容', trigger: 'blur' }, { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' } ], } } }, methods: { search() { this.doSearch(this.formInline); }, doSearch(params) { let url = this.axios.urls.SYSTEM_ARTICLE_LIST; this.axios.post(url, params).then((response) => { console.log(response); this.listData = response.data.result; this.pageBean = response.data.pageBean; }).catch((response)=>{ console.log(response); }); }, handleSizeChange(rows) { console.log('页码大小发生改变的时候触发！！！' + rows) this.formInline.page = 1; this.formInline.rows = rows; this.search(); }, handleCurrentChange(page) { console.log('当前页页码发生改变的时候触发！！！' + page) this.formInline.page = page; this.search(); }, closeDialog() { this.editFormVisible = false; this.clearForm(); }, submitForm(){ // 用来提交新增，修改表单数据的，提交之前需要通过vue实例中定义表单填写规则 this.$refs['editForm'].validate((valid) => { if (valid) { //设置地址 let url; 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.clearForm(); this.doSearch(this.formInline); }).catch((response)=>{ console.log(response); }); } else { console.log('error submit!!'); return false; } }); }, clearForm(){ this.editForm.id=0; this.editForm.title=''; this.editForm.body=''; this.formInline.page=1;//初始页为1 this.formInline.rows=10;//每页10条数据 this.editFormVisible=false;//关闭弹窗 }, //新增方法 add(){ this.title='新增文章', //让框弹出来 this.editFormVisible=true; }, //修改的方法 edit(index,row){ // index代表的是操作数据在当前界面的行号 // row代表操作当前数据，就意味着可以冲row中或所有数据库列段名 // var row=$("#dd").datagrid("getselected"); // $("ff").form("load","row");完成了数据回显 this.title='编辑文章', //把数据显示在框框上 this.editForm.id = row.id; this.editForm.title = row.title; this.editForm.body = row.body; //让框弹出来 this.editFormVisible=true; }, //删除的方法 del(index,row){ let url = this.axios.urls.SYSTEM_ARTICLE_DEL; this.axios.post(url,{id:row.id}).then((response) => { console.log(response); this.clearForm(); this.doSearch({}); }).catch((response)=>{ console.log(response); }); } }, created() { this.doSearch({}); } } </script> <style> </style>
效果展示：
查询：
新增：
先点击新增==>弹出框输入内容
成功
删除：
把刚刚新增的数据删掉
修改：
成功
谢谢观看！