一、表单验证

步骤：

①、将以下拷入Articles.vue中分页条下面

    <!-- 编辑界面 --><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>

拷入后会报错，将title和editFormVisible、editForm赋值

 title: '',editFormVisible: false,editForm: {title: '',body: '',id: 0},

然后先加入一个方法closeDialog

closeDialog() {// 关闭窗体}

②、写一个方法 handleEdit

handleEdit(index, row) {// 展示新增文章的表单窗体this.editFormVisible = true;}

效果：

③、将以下代码拷入

rules: {title: [{required: true,message: '请输入请输入文章标题',trigger: 'blur'},{min: 5,max: 10,message: '长度在 5 到 10 个字符',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;}});},

效果：

步骤总结：

1、拷入表单组件 el-from

2、通过点击新增/编辑将表单对应窗口弹出

3、给表单设置规则 rules

4、当表单提交事件要校验规则

二、增删改

写个方法：clearData

clearData() {// 清除编辑窗体的缓存数据this.editForm.title = '';this.editForm.id = 0;this.editForm.body = '';this.title = '';this.editFormVisible = false;}

在关闭窗体方法中加入以下代码

this.clearData();

handleEdit方法中加入以下代码

this.clearData();// 展示新增文章的表单窗体this.editFormVisible = true;if (row) {// 编辑this.title = '编辑窗体';this.editForm.id = row.id;this.editForm.title = row.title;this.editForm.body = row.body;} else {// 新增this.title = '新增窗体';}

写入以下代码

clearData() {// 清除编辑窗体的缓存数据this.editForm.title = '';this.editForm.id = 0;this.editForm.body = '';this.title = '';this.editFormVisible = false;}

关闭窗体方法和handleEdit中调用以上该方法

this.clearData();

对submitForm方法进行优化

      submitForm(formName) {this.$refs[formName].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(r => {// 新增成功 1.关闭窗体-清空数据 2.重新查询this.$message({message: r.data.msg,type: 'success'});this.clearData();this.search();}).catch(e => {});} else {console.log('error submit!!');return false;}});}

然后更改doSearch中的以下代码，改成第二个代码

this.formInline = resp.data.pageBean;

this.formInline.total = resp.data.pageBean.total;

最后写个删除方法

deleteUser(index, row) {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {let url = this.axios.urls.SYSTEM_ARTICLE_DEL;this.axios.post(url, {id:row.id}).then(r => {// 新增成功 1.关闭窗体-清空数据 2.重新查询this.$message({message: r.data.msg,type: 'success'});this.clearData();this.search();}).catch(e => {});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});}

整个页面代码

<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="handleEdit()">添加</el-button></el-form-item></el-form><!--列表--><el-table size="small" :data="listData" highlight-current-row style="width: 100%;"><el-table-column align="center" type="selection" width="60"></el-table-column><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="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="deleteUser(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="100"layout="total, sizes, prev, pager, next, jumper" :total="formInline.total"></el-pagination><!-- 编辑界面 --><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></div>
</template><script>export default {name: 'Articles',data() {return {title: '',editFormVisible: false,editForm: {title: '',body: '',id: 0},rules: {title: [{required: true,message: '请输入请输入文章标题',trigger: 'blur'},{min: 5,max: 10,message: '长度在 5 到 10 个字符',trigger: 'blur'}],body: [{required: true,message: '请输入文章内容',trigger: 'blur'}],},listData: [],formInline: {page: 1,total: 10,title: ''}}},methods: {handleSizeChange(rows) {this.formInline.page = 1;this.formInline.rows = rows;this.search();},handleCurrentChange(page) {this.formInline.page = page;this.search();},// 为了代码复用doSearch(parm) {// 获取树形节点的数据let url = this.axios.urls.SYSTEM_ARTICLE_LIST;// alert(url);// {uname:'zs',pwd:'123'}this.axios.post(url, parm).then((resp) => {console.log(resp);this.listData = resp.data.result;this.formInline.total = resp.data.pageBean.total;}).catch(function() {});},search() {// 按照条件查询this.doSearch(this.formInline);},closeDialog() {// 关闭窗体this.clearData();},clearData() {// 清除编辑窗体的缓存数据this.editForm.title = '';this.editForm.id = 0;this.editForm.body = '';this.title = '';this.editFormVisible = false;},handleEdit(index, row) {this.clearData();// 展示新增文章的表单窗体this.editFormVisible = true;if (row) {// 编辑this.title = '编辑窗体';this.editForm.id = row.id;this.editForm.title = row.title;this.editForm.body = row.body;} else {// 新增this.title = '新增窗体';}},deleteUser(index, row) {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {let url = this.axios.urls.SYSTEM_ARTICLE_DEL;this.axios.post(url, {id:row.id}).then(r => {// 新增成功 1.关闭窗体-清空数据 2.重新查询this.$message({message: r.data.msg,type: 'success'});this.clearData();this.search();}).catch(e => {});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},submitForm(formName) {this.$refs[formName].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(r => {// 新增成功 1.关闭窗体-清空数据 2.重新查询this.$message({message: r.data.msg,type: 'success'});this.clearData();this.search();}).catch(e => {});} else {console.log('error submit!!');return false;}});}},created() {this.doSearch({});}}
</script><style>
</style>

效果：

SPA项目开发（CRUD表单验证）相关推荐

SPA项目开发之CRUD+表单验证
目录一.SPA项目开发之表单验证二.SPA项目开发之CRUD 一.SPA项目开发之表单验证我们做项目的都关乎到增删改查的功能,在进行增删改查功能之前,我们必须有一个表单验证. ...
微信小程序开发之表单验证（WxValidate使用）
微信小程序的开发框架个人感觉大体上跟VUE是差不多的,但是他的表单组件没有自带的验证功能,因此开发小程序的表单验证时候一般有两种方法,一是自己裸写验证规则,但是需要比较扎实的正则表达式基础,一种是利用 ...
JavaWeb前端开发注册表单验证
注册表单验证最近在尝试学习开发一个网站,现将登录页面的表单验证总结如下表单校验分析 1.用户名:单词字符,8到20位 2.密码:单词字符,8到20位 3.email:邮箱格式 4.姓名:汉字非空 ...
vue 项目实践 -ele 表单验证
关键代码 this.$refs[name].validate((valid)=>{if(valid){// 表单验证通过,可......}} ); 说明 this.refs.refDiv 访问到 ...
vue项目中iview表单验证 this.$refs[name].validate(valid = { }无效
验证成功的时候没有添加 callback(); 加上该方法就可以了转载于:https://www.cnblogs.com/qiandong1933/p/qiandong19333.html
jQuery学习之：Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
bootstrap3 第2课：表单验证
做Web开发,表单验证是再常见不过的需求了,友好的错误提示能增加用户体验.比如我们在提交之前,首先要验证有哪些数据是必填项,哪些数据的格式需要验证. 如果我们的网页使用的bootstrap3框架搭建的 ...
视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
Mendix敏捷开发零基础学习《二》-进阶（Microflow微流、表单验证、运算符、条件判断、数据嵌套、触发器、Debug问题跟踪、版本管理）
目录结构 Mendix敏捷开发零基础学习<二> 一.Microflow微流 1.引言 2.常见的功能 3.微流可以做那些事情? 3.1 举例1(用微流打开新增页面) 3.2 举例2(用微流 ...

SPA项目开发（CRUD表单验证）

一、表单验证

二、增删改

SPA项目开发（CRUD表单验证）相关推荐

最新文章

热门文章