若依前端分离版-APP(UNI APP)表单添加验证

1.在page页面中onReady事件添加如下代码

复制代码
		onReady() {
			this.$refs.form.setRules(this.rules)
		},

2.在data中添加ruels这个对象

复制代码
				rules: {
					nickName: {
						rules: [{
							required: true,
							errorMessage: '用户昵称不能为空'
						}]
					},
					phonenumber: {
						rules: [{
							required: true,
							errorMessage: '手机号码不能为空'
						}, {
							pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
							errorMessage: '请输入正确的手机号码'
						}]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '邮箱地址不能为空'
						}, {
							format: 'email',
							errorMessage: '请输入正确的邮箱地址'
						}]
					}
				},
复制代码
			/** 提交按钮 保存报工按钮 */
			submitForm(ref) {
				console.log("保存调度派工开始")
				this.$refs.form.validate().then(res => {
						if (this.repair.repairId != null) {
							updateRepair(this.form).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.getList();

							});
						} else {
							addRepair(this.repair).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
							});
						}
					}
				);
				console.log("保存调度派工结束")
			},

注:得到用户存储的帐号和密码

复制代码
		userName: this.$store.state.user.name,
相关推荐
抱琴_7 分钟前
【Vue3】大屏性能优化黑科技:Vue 3 中实现请求合并,让你的大屏飞起来!
前端·vue.js
不会玩电脑的Xin.9 分钟前
HTML + CSS
前端·css·html
hadage23329 分钟前
--- JavaScript 的一些常用语法总结 ---
java·前端·javascript
彭于晏爱编程30 分钟前
🍭🍭🍭升级 AntD 6:做第一个吃螃蟹的人
前端
掘金一周40 分钟前
大部分人都错了!这才是chrome插件多脚本通信的正确姿势 | 掘金一周 11.27
前端·人工智能·后端
_瑶瑶_1 小时前
浅记一下ElementPlus中的虚拟化表格(el-table-v2)的简单使用
前端·javascript
Drift_Dream1 小时前
ResizeObserver:轻松监听元素尺寸变化
前端
拉不动的猪1 小时前
Axios 请求取消机制详解
前端·javascript·面试
该用户已不存在1 小时前
2025 年 8 款最佳远程协作工具
前端·后端·远程工作