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

最新推荐文章于 2021-11-16 14:36:26 发布
最新推荐文章于 2021-11-16 14:36:26 发布
阅读量96 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lei_lin/article/details/100514529
版权

1. 表单验证

Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，
并将Form-Item的prop属性设置为需校验的字段名即可

 <el-form-item label="活动名称" prop="name">
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm"

注1：有多个表单，怎么在提交进行区分？
我们在rules这里写了对表单的验证规则，但是我们如何在methods里进行指定的表单进行认证，
所以我们一开始就在el-form里写了 ref=“ruleForm”，我们在methods里就可以用

注2：清空表单验证信息
this.$refs[formName].resetFields();

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

<script>
	export default {
		data() {
			return {
				listData: [],
				formInline: {
					title: '',
					page: 1,
					rows: 10
				},
				total: 0,
				editForm: {
					id: 0,
					title: '',
					body: ''
				},
				title: '',
				editFormVisible: false,
				rules: {
					title: [{
							required: true,
							message: '请输入文章标题',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					body: [{
						required: true,
						message: '请选择文章内容',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			closeDialog() {
				this.clearData();
				this.editFormVisible = false;
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						alert('submit!!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			clearData(){
				this.editFormVisible = false;
				this.title = '';
				this.editForm.id = 0;
				this.editForm.title = '';
				this.editForm.body = '';
			}
		}
	}
</script>

在这里插入图片描述
在这里插入图片描述

2. CUD

2.1 新增

<script>
	export default {
		data() {
			return {
				listData: [],
				formInline: {
					title: '',
					page: 1,
					rows: 10
				},
				total: 0,
				editForm: {
					id: 0,
					title: '',
					body: ''
				},
				title: '',
				editFormVisible: false,
				rules: {
					title: [{
							required: true,
							message: '请输入文章标题',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					body: [{
						required: true,
						message: '请选择文章内容',
						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.total = response.data.pageBean.total;
				}).catch(function(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.clearData();
				this.editFormVisible = false;
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let url;
						if(this.editForm.id == 0){
							url = this.axios.urls.SYSTEM_ARTICLE_ADD;
						}
						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;
					}
				});
			},
			handleAdd() {
				this.clearData();
				this.editFormVisible = true;
				this.title = '新增文章';
			},
			handleEdit(index,row){
				this.editFormVisible = true;
				this.title = '编辑文章';
				this.editForm.id = row.id;
				this.editForm.title = row.title;
				this.editForm.body = row.body;
			},
			clearData(){
				this.editFormVisible = false;
				this.title = '';
				this.editForm.id = 0;
				this.editForm.title = '';
				this.editForm.body = '';
			}
		},
		created() {
			this.doSearch({});
		}
	}
</script>

在这里插入图片描述

2.2 添加修改/删除按钮

		<!--列表-->
		<el-table size="small" :data="listData" border element-loading-text="拼命加载中" style="width: 100%;">
			<el-table-column align="center" type="selection" min-width="1">
			</el-table-column>
			<el-table-column sortable prop="id" label="ID" min-width="1">
			</el-table-column>
			<el-table-column sortable prop="title" label="文章标题" min-width="2">
			</el-table-column>
			<el-table-column sortable prop="body" label="文章内容" min-width="4">
			</el-table-column>
			<el-table-column align="center" label="操作" min-width="2">
				<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>

<script>
	export default {
		data() {
			return {
				listData: [],
				formInline: {
					title: '',
					page: 1,
					rows: 10
				},
				total: 0,
				editForm: {
					id: 0,
					title: '',
					body: ''
				},
				title: '',
				editFormVisible: false,
				rules: {
					title: [{
							required: true,
							message: '请输入文章标题',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					body: [{
						required: true,
						message: '请选择文章内容',
						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.total = response.data.pageBean.total;
				}).catch(function(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.clearData();
				this.editFormVisible = false;
			},
			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((response) => {
							console.log(response);
							this.clearData();
							this.search();
						}).catch(function(error) {
							console.log(error);
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			handleAdd() {
				this.clearData();
				this.editFormVisible = true;
				this.title = '新增文章';
			},
			handleEdit(index,row){
				this.editFormVisible = true;
				this.title = '编辑文章';
				this.editForm.id = row.id;
				this.editForm.title = row.title;
				this.editForm.body = row.body;
			},
			deleteUser(index,row){
				let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
				this.axios.post(url, {id:row.id}).then((response) => {
					console.log(response);
					this.clearData();
					this.search();
				}).catch(function(error) {
					console.log(error);
				});
			},
			clearData(){
				this.editFormVisible = false;
				this.title = '';
				this.editForm.id = 0;
				this.editForm.title = '';
				this.editForm.body = '';
			}
		},
		created() {
			this.doSearch({});
		}
	}
</script>

在这里插入图片描述

完整代码：

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" border element-loading-text="拼命加载中" style="width: 100%;">
			<el-table-column align="center" type="selection" min-width="1">
			</el-table-column>
			<el-table-column sortable prop="id" label="ID" min-width="1">
			</el-table-column>
			<el-table-column sortable prop="title" label="文章标题" min-width="2">
			</el-table-column>
			<el-table-column sortable prop="body" label="文章内容" min-width="4">
			</el-table-column>
			<el-table-column align="center" label="操作" min-width="2">
				<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="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: [],
				formInline: {
					title: '',
					page: 1,
					rows: 10
				},
				total: 0,
				editForm: {
					id: 0,
					title: '',
					body: ''
				},
				title: '',
				editFormVisible: false,
				rules: {
					title: [{
							required: true,
							message: '请输入文章标题',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 10,
							message: '长度在 3 到 10 个字符',
							trigger: 'blur'
						}
					],
					body: [{
						required: true,
						message: '请选择文章内容',
						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.total = response.data.pageBean.total;
				}).catch(function(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.clearData();
				this.editFormVisible = false;
			},
			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((response) => {
							console.log(response);
							this.clearData();
							this.search();
						}).catch(function(error) {
							console.log(error);
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			handleAdd() {
				this.clearData();
				this.editFormVisible = true;
				this.title = '新增文章';
			},
			handleEdit(index,row){
				this.editFormVisible = true;
				this.title = '编辑文章';
				this.editForm.id = row.id;
				this.editForm.title = row.title;
				this.editForm.body = row.body;
			},
			deleteUser(index,row){
				let url = this.axios.urls.SYSTEM_ARTICLE_DEL;
				this.axios.post(url, {id:row.id}).then((response) => {
					console.log(response);
					this.clearData();
					this.search();
				}).catch(function(error) {
					console.log(error);
				});
			},
			clearData(){
				this.editFormVisible = false;
				this.title = '';
				this.editForm.id = 0;
				this.editForm.title = '';
				this.editForm.body = '';
			}
		},
		created() {
			this.doSearch({});
		}
	}
</script>

<style>

</style>

感谢观看!

傻_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据主键ID修改已经存在的数据
weixin_44543219的博客
04-16 4445
对比一下新增的基本思路和修改思路: 保存新增的基本思路： 弹出模态框 → 重置表单 → 提交新增数据 → 关闭模态框 保存修改的基本思路： 弹出模态框 → 重置表单 → 回填数据（数据回显） → 提交修改数据 → 保存修改操作 → 关闭模态框 对比之后不难发现：修改其实就是比新增多了一个操作数据的回填（也称之为数据回显） 上面两张图是修改前和修改后的数据对比（修改了一下学生的图片信息、学生所在...
SPA项目CRUD+表单验证
trasewell的博客
08-14 98
引子： 本次知识点和上节一样，层层递进，建立在上节知识点上， 以达到数据表格的增删查改并实现表单验证 由于较为简单，我们把代码展示出来 CRUD+表单验证： Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可 Article.vue <template> <div> ...
SPA项目开发之CRUD + 表单验证
断雨的博客
08-14 219
文章目录表单验证 + crudArticle.vue 在上一篇的博文 动态树 + 数据表格 + 分页 中，我们实现了左侧导航菜单（动态树）、数据表格 以及 分页。今天我们在上篇的基础上继续完善功能，这次我们要完成的功能是实现对文章的中增删改查，其中我们要对数据进行验证（表单验证），接下来进入正题。 表单验证 + crud Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验...
SPA CRUD+表单验证
Dawn.x的博客
08-27 100
目录表单验证Crud操作 接上文，这篇博客主要实现数据表格的增删改查Crud操作，以及增加时表单的验证 表单验证 首先在Articles组件中添加一个类似于模态框的弹出框： <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog"> <el-form label-width="120px" :model="editForm" :rules="rules
（vue）spa项目开发之CRUD&表单验证&vue的增删改查
m0_60375943的博客
11-12 382
1. 表单验证 Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则， 并将Form-Item的prop属性设置为需校验的字段名即可 <el-form-item label="活动名称" prop="name"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" 注1：有多个表单，怎么在提交进行区分？ 我们在rules这里写了对表单的验证规则，...
SPA项目开发之CRUD&&表单验证
weixin_56069070的博客
11-16 366
前言 spa项目完成登录注册_笑看人生十余载的博客-CSDN博客 (61条消息) spa项目开发首页导航&&左侧菜单_笑看人生十余载的博客-CSDN博客 spa项目开发首页导航&&左侧菜单_笑看人生十余载的博客-CSDN博客 即前三篇篇博客的基础上在进行开发，今天要分享的知识是spa项目开发之CRUD+表单验证 码字不易，转载请说明！！！ 目录 一、表单验证 ①导入相关组件 ②将rules加入表单验证（data里面定义规则） ③调动规则 完整代码
Vue_10_Spa_项目4次-CRUD+表单验证
qq_58530605的博客
11-13 91
一、表单验证 在分页条下面放入编辑组件el-dialog： <!-- 编辑界面--> <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog"> <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm"> &lt
基于微信小程序社区垃圾回收管理系统设计与实现.docx
08-27
基于微信小程序社区垃圾回收管理系统设计与实现.docx
基于YOLOv9实现工业布匹缺陷(破洞、污渍)检测系统python源码+详细运行教程+训练好的模型+评估指标曲线.zip
08-27
基于YOLOv9实现工业布匹缺陷(破洞、污渍)检测系统python源码+详细运行教程+训练好的模型+评估 【使用教程】 一、环境配置 1、建议下载anaconda和pycharm 在anaconda中配置好环境，然后直接导入到pycharm中，在pycharm中运行项目 anaconda和pycharm安装及环境配置参考网上博客，有很多博主介绍 2、在anacodna中安装requirements.txt中的软件包 命令为：pip install -r requirements.txt 或者改成清华源后再执行以上命令，这样安装要快一些 软件包都安装成功后才算成功 3、安装好软件包后，把anaconda中对应的python导入到pycharm中即可（不难，参考网上博客） 二、环境配置好后，开始训练（也可以训练自己数据集） 1、数据集准备 需要准备yolo格式的目标检测数据集，如果不清楚yolo数据集格式，或者有其他数据训练需求，请看博主yolo格式各种数据集集合链接：https://blog.csdn.net/DeepLearning_/article/details/127276492 里面涵盖了上百种yolo数据集，且在不断更新，基本都是实际项目使用。来自于网上收集、实际场景采集制作等，自己使用labelimg标注工具标注的。数据集质量绝对有保证！ 本项目所使用的数据集，见csdn该资源下载页面中的介绍栏，里面有对应的下载链接，下载后可直接使用。 2、数据准备好，开始修改配置文件 参考代码中data文件夹下的banana_ripe.yaml，可以自己新建一个不同名称的yaml文件 train：训练集的图片路径 val：验证集的图片路径 names: 0: very-ripe 类别1 1: immature 类别2 2: mid-ripe 类别3 格式按照banana_ripe.yaml照葫芦画瓢就行，不需要过多参考网上的 3、修改train_dual.py中的配置参数，开始训练模型 方式一： 修改点： a.--weights参数，填入'yolov9-s.pt'，博主训练的是yolov9-s，根据自己需求可自定义 b.--cfg参数，填入 models/detect/yolov9-c.yaml c.--data参数，填入data/banana_ripe.yaml，可自定义自己的yaml路径 d.--hyp参数，填入hyp.scratch-high.yaml e.--epochs参数，填入100或者200都行，根据自己的数据集可改 f.--batch-size参数，根据自己的电脑性能（显存大小）自定义修改 g.--device参数，一张显卡的话，就填0。没显卡，使用cpu训练，就填cpu h.--close-mosaic参数，填入15 以上修改好，直接pycharm中运行train_dual.py开始训练 方式二： 命令行方式，在pycharm中的终端窗口输入如下命令，可根据自己情况修改参数 官方示例：python train_dual.py --workers 8 --device 0 --batch 16 --data data/coco.yaml --img 640 --cfg models/detect/yolov9-c.yaml --weights '' --name yolov9-c --hyp hyp.scratch-high.yaml --min-items 0 --epochs 500 --close-mosaic 15 训练完会在runs/train文件下生成对应的训练文件及模型，后续测试可以拿来用。 三、测试 1、训练完，测试 修改detect_dual.py中的参数 --weights，改成上面训练得到的best.pt对应的路径 --source，需要测试的数据图片存放的位置，代码中的test_imgs --conf-thres，置信度阈值，自定义修改 --iou-thres，iou阈值，自定义修改 其他默认即可 pycharm中运行detect_dual.py 在runs/detect文件夹下存放检测结果图片或者视频 【特别说明】 *项目内容完全原创，请勿对项目进行外传，或者进行违法等商业行为！ 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。
java-ssm+jsp明星周边在线购物商城实现源码
08-27
java-ssm+jsp明星周边在线购物商城 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：jsp 关键技术：jsp、spring、ssm、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
专题01 数列大题基础练（解析版） (1).pdf
08-27
专题01 数列大题基础练（解析版） (1)
【优质】基于sa4828的智能化全数字式专用变频器的硬件设计.doc
最新发布
08-27
【优质】基于sa4828的智能化全数字式专用变频器的硬件设计.doc
基于微信小程序婚庆摄影小程序设计与实现.docx
08-27
基于微信小程序婚庆摄影小程序设计与实现.docx
java基于ssm+vue银行贷款管理系统源码 带毕业论文+PPT
08-27
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；VUE技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
【机械手控制】基于matlab机器人机械手自适应模糊滑模控制【含Matlab源码 7368期】.mp4
08-27
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
Another-Redis-Desktop-Manager.1.6.7.exe
08-27
Redis桌面(GUI)管理客户端
avue-crud表单验证
07-28
Avue-Crud是一个基于Vue.js的前端组件库，提供了一套完整的CRUD（创建、读取、更新、删除）操作的功能。在Avue-Crud中，表单验证是一个非常重要的功能。下面是一些关于Avue-Crud表单验证的相关内容： 1. 表单验证规则定义：在Avue-Crud中，可以通过在表单元素上使用`rules`属性来定义验证规则。例如，可以使用`required`来指定必填项，使用`min`和`max`来指定最小值和最大值，使用`regex`来指定正则表达式等。 2. 异步验证：Avue-Crud提供了异步验证的功能，可以通过`async-validator`库来实现。通过在验证规则中定义`async`属性，并且指定一个异步验证方法，可以在表单值改变时进行异步验证。 3. 自定义验证方法：除了使用内置的验证规则外，还可以自定义验证方法来实现特定的验证逻辑。可以通过在表单元素上使用`custom-validator`属性，并指定一个自定义验证方法来实现。 4. 错误提示信息：在Avue-Crud中，可以通过在验证规则中定义错误提示信息来实现自定义的错误提示。可以通过在验证规则中使用`message`属性来指定错误提示信息。 总的来说，Avue-Crud提供了丰富的表单验证功能，并且可以根据具体需求进行灵活配置和扩展。希望以上内容对你有所帮助！如果还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值