若依前端分离版-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,
相关推荐
持久的棒棒君26 分钟前
启动electron桌面项目控制台输出中文时乱码解决
前端·javascript·electron
小离a_a1 小时前
使用原生css实现word目录样式,标题后面的...动态长度并始终在标题后方(生成点线)
前端·css
郭优秀的笔记2 小时前
抽奖程序web程序
前端·css·css3
布兰妮甜2 小时前
CSS Houdini 与 React 19 调度器:打造极致流畅的网页体验
前端·css·react.js·houdini
小小愿望2 小时前
ECharts 实战技巧:揭秘 X 轴末项标签 “莫名加粗” 之谜及破解之道
前端·echarts
小小愿望2 小时前
移动端浏览器中设置 100vh 却出现滚动条?
前端·javascript·css
fail_to_code2 小时前
请不要再只会回答宏任务和微任务了
前端
摸着石头过河的石头2 小时前
taro3.x-4.x路由拦截如何破?
前端·taro
lpfasd1233 小时前
开发Chrome/Edge插件基本流程
前端·chrome·edge
练习前端两年半3 小时前
🚀 Vue3 源码深度解析:Diff算法的五步优化策略与最长递增子序列的巧妙应用
前端·vue.js