uniapp + uView动态表单校验

项目需求:动态循环表单,并实现动态表单校验

页面:

		<u--form label-position="top" :model="tmForm" ref="tmForm" label-width="0px" :rules='rules'>
			<div v-for="(element, index) in tmForm.tmList.filter((item) => item.delFlag !== 1)" :key="index"
				class="form-item">
				<div v-if="element.txTip == 'Input'">{{ element.tmTitle }}</div>
				<u-form-item :required="element.pz.sfBt == '0'" :prop="`tmList[${index}].value`"
					:label="`第${getFilteredIndex(index)}题`" v-if="element.txTip != 'Input'">
					<div class="tm-title">{{ element.tmTitle }}</div>
					<div class="tm-sm" v-if="element.tmSm">题目说明:{{ element.tmSm }}</div>
					<div class="tm-sm" v-if="element.txTip == 'Textarea'">
						题目规则:请填写『{{ element.pz.zfMin }} ~ {{ element.pz.zfMax }}』个字
					</div>
					<div class="tm-sm" v-if="element.txTip == 'InputNumber'">
						题目规则:请填写『{{ element.pz.szMin }} ~ {{ element.pz.szMax }}』之间,小数点不超过{{
		                  element.pz.szDeciPlace
		                }}位的数
					</div>
					<div class="tm-sm" v-if="element.txTip == 'CheckBox' || element.txTip == 'twCheckBox'">
						题目规则:请选择『{{ element.pz.dxMin }} ~ {{ element.pz.dxMax }}』个选项
					</div>
					<div class="tm-sm" v-if="element.txTip == 'TimePicker'">
						题目规则:请选择『{{ element.pz.rqMin }} ~ {{ element.pz.rqMax }}』之间的时间
					</div>
					<div class="tm-sm" v-if="element.txTip == 'Upload'">
						题目规则:请上传『{{ element.pz.dxMin }} ~ {{ element.pz.dxMax }}』张图片
					</div>
					<component style="margin-top: 10upx;" :optionList="element.optionList" :options="element.pz"
						v-model="element.value" :is="getWidget(element.txTip)"
						@updateValue="(newValue) => updateValue(element, newValue)"></component>
				</u-form-item>
			</div>
		</u--form>

直接给rules里面循环加上校验规则,注意页面prop的写法  :prop="`tmList[${index}].value`"

	export default {
		data() {
			return {
				tmForm: {
					tmList: []
				},
				rules: {}
			}
		},
		mounted() {
			this.setRules()
		},
		methods: {
			// 循环设置rules
			setRules() {
				this.tmForm.tmList.forEach((ele, index) => {
					this.$set(this.rules, `tmList[${index}].value`, [
						{
							validator: this.validate(ele),
							trigger: 'change'
						}
					])
				}),
		},

     			// 表单验证方法
			validate(element) {
				return (rule, value2, callback) => {
                    let value = element.value  //value2是空的,我手动赋值了

					if (element.pz.sfBt === '0' && (!value || value.length < 1)) {
						callback(new Error("请输入"));
						return;
					}

					if (element.txTip == "Textarea") {
						if (value && value.length > element.pz.zfMin) {
							callback(); // 通过验证
						} else {
							callback(new Error("文本长度不能小于10位"));
						}
					}

					if (element.txTip == "InputNumber") {
						const regex = new RegExp(`^-?\\d+(\\.\\d{0,${element.pz.szDeciPlace}}})*$`);
						// 判断是否在指定范围内且满足小数点位数要求
						if (value >= element.pz.szMin && value <= element.pz.szMax && regex.test(value)) {
							callback(); // 通过验证
						} else {
							callback(
								new Error(
									`请输入『${element.pz.szMin} ~ ${element.pz.szMax}』之间,小数点不超过${element.pz.szDeciPlace}位的数`
								)
							); // 验证失败
						}
					}

					if (element.txTip == "CheckBox" || element.txTip == "twCheckBox") {
						if (value.length >= element.pz.dxMin && value.length <= element.pz.dxMax) {
							console.log(1);
							callback(); // 通过验证
						} else {
							callback(new Error(`请选择『${element.pz.dxMin} ~ ${element.pz.dxMax}』个选项`)); // 验证失败
							console.log(2);
						}
					}

					if (element.txTip == "Upload") {
						const imageUrls = value.split(","); // 将图片 URL 字符串拆分为数组
						if (imageUrls.length >= element.pz.dxMin) {
							callback(); // 验证通过
						} else {
							callback(new Error(`请至少上传 ${element.pz.dxMin} 张图片`)); // 验证失败
						}
					}

					if (element.txTip == "Address" && element.pz.sfXxdz == "0") {
						if (value.value2) {
							callback(); // 验证通过
						} else {
							callback(new Error(`请填写详细地址`)); // 验证失败
						}
					}

					if (element.txTip == "PhoneNumber") {
						const reg = /^1[3-9]\d{9}$/; // 定义手机号码的正则表达式
						if (reg.test(value)) {
							callback(); // 验证通过
						} else {
							callback(new Error("手机号码格式不正确")); // 验证失败
						}
					}

					if (element.txTip == "IdNumber") {
						const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; // 定义身份证号码的正则表达式
						if (reg.test(value)) {
							callback(); // 验证通过
						} else {
							callback(new Error("身份证号码格式不正确")); // 验证失败
						}
					}

					if (element.txTip == "Email") {
						const reg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; // 定义邮箱地址的正则表达式
						if (reg.test(value)) {
							callback(); // 验证通过
						} else {
							callback(new Error("邮箱地址格式不正确")); // 验证失败
						}
					}

					callback();
				};
			},
    }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/586177.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

(详细整理!!!!)Tensorflow与Keras、Python版本对应关系!!!

小伙伴们大家好&#xff0c;不知道大家有没有被tensorflow框架困扰过 今天我就给大家整理一下tensorflow和keras、python版本的对应关系 大家这些都可以在官网找到&#xff0c;下面我把官网的连接给大家放在这里&#xff1a;在 Windows 环境中从源代码构建 | TensorFlow (g…

搭建大型分布式服务(三十七)SpringBoot 整合多个kafka数据源-取消限定符

系列文章目录 文章目录 系列文章目录前言一、本文要点二、开发环境三、原项目四、修改项目五、测试一下五、小结 前言 本插件稳定运行上百个kafka项目&#xff0c;每天处理上亿级的数据的精简小插件&#xff0c;快速上手。 <dependency><groupId>io.github.vipjo…

基于 React 的图形验证码插件

react-captcha-code NPM 地址 &#xff1a; react-captcha-code - npm npm install react-captcha-code --save 如下我自己的封装&#xff1a; import Captcha from "react-captcha-code";type CaptchaType {captchaChange: (captchaInfo: string) > void;code…

前端发起网络请求的几种常见方式(XMLHttpRequest、FetchApi、jQueryAjax、Axios)

摘要 前端发起网络请求的几种常见方式包括&#xff1a; XMLHttpRequest (XHR)&#xff1a; 这是最传统和最常见的方式之一。它允许客户端与服务器进行异步通信。XHR API 提供了一个在后台发送 HTTP 请求和接收响应的机制&#xff0c;使得页面能够在不刷新的情况下更新部分内容…

Flutter笔记:Widgets Easier组件库(2)阴影盒子

Flutter笔记 Widgets Easier组件库&#xff08;2&#xff09;&#xff1a;阴影盒子 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress o…

Python中的动态数据可视化Bokeh库实战

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 Python 中的动态数据可视化Bokeh库实战 在数据科学和可视化领域&#xff0c;动态数据可视化…

windows下安装onlyoffice

文章目录 1、 安装ErLang2、 安装rabbitmq3、 安装postgresql4、 安装onlyoffice(社区版) 1、 安装ErLang 下载地址&#xff1a;https://erlang.org/download/otp_win64_24.2.exe opt_wind64_24.2.exe 直接运行&#xff0c;一步一步安装 2、 安装rabbitmq 下载地址&#xf…

【笔记】Simulink与Workbench交互+自定义m函数封装为Simulink模块

以如下三角函数为例&#xff0c;说明建模方法 ya*sin(b*2*pi*uc);0.总模型总代码 总模型 总代码&#xff1a; clc clear close allt_all10; a10; b1; c0;%pi/2; delta_t0.01; simOutsim(test240430); out_tsimOut.tout; out_y1simOut.yout{1}.Values; out_y2simOut.yout{2}.…

C++-10

1.C一个程序&#xff0c;实现两个类&#xff0c;分别存放输入的字符串中的数字和字母&#xff0c;并按各自的顺序排列&#xff0c; 类中实现-一个dump函数&#xff0c;调C用后输出类中当前存放的字符串结果。 例如&#xff0c;输入1u4y2a3d,输出:存放字母的类&#xff0c;输出a…

机器人正反向运动学(FK和IK)

绕第一个顶点可以沿Z轴转动&#xff0c;角度用alpha表示 绕第二个点沿X轴转动&#xff0c;角度为Beta 第三个点沿X轴转动&#xff0c;记作gama 这三个点构成姿态&#xff08;pose&#xff09; 我们记第一个点为P0&#xff0c;画出它的本地坐标系&#xff0c;和世界坐标系一样红…

无人机+三维建模:倾斜摄影技术详解

无人机倾斜摄影测量技术是一项高新技术&#xff0c;近年来在国际摄影测量领域得到了快速发展。这种技术通过从一个垂直和四个倾斜的五个不同视角同步采集影像&#xff0c;从而获取到丰富的建筑物顶面及侧视的高分辨率纹理。这种技术不仅能够真实地反映地物情况&#xff0c;还能…

设计模式 --6组合模式

文章目录 组合模式应用场景组合模式概念组合模式结构图透明方式和安全方式什么时候使用组合模式公司管理系统使用 组合模式来构架组合模式的好处 组合模式应用场景 整体和部分可以被一致性对待 比如人力资源部 财务部的管理功能可以复用于分公司的功能 可以引入一种 树状的结构…

【webrtc】MessageHandler 2: 基于线程的消息处理:以PeerConnectionClient为例

PeerConnectionClient 前一篇 nullaudiopoller 并么有场景线程,而是就是在当前线程直接执行的, PeerConnectionClient 作为一个独立的客户端,默认的是主线程。 PeerConnectionClient 同时维护客户端的信令状态,并且通过OnMessage实现MessageHandler 消息处理。 目前只处理一…

AI大模型日报#0430:疑似GPT4.5模型刷屏、上交实现「蛋白质功能定向进化」、微软紧急撤回WizardLM-2

导读&#xff1a; 欢迎阅读《AI大模型日报》&#xff0c;内容基于Python爬虫和LLM自动生成。目前采用“文心一言”生成了今日要点以及每条资讯的摘要。 《AI大模型日报》今日要点&#xff1a; 在AI大模型领域&#xff0c;多项研究进展和行业应用动态引发关注。一夜之间&#x…

Gateway Predicate断言(谓词)

是什么 Spring Cloud Gateway匹配路由作为Spring WebFlux HandlerMapping基础设施的一部分。 Spring Cloud Gateway包含许多内置的路由谓词工厂。 所有这些谓词都匹配HTTP请求的不同属性。 您可以使用逻辑 and 语句来联合收割机组合多个路由谓词工厂。 Predicate就是为了实现一…

sum函数搭配group by /having的案例说明

记录一些常用的函数及用法 --查询份额大于1w的投资人信息。 聚合数据的筛选&#xff1a;当你需要基于聚合函数&#xff08;如 SUM(), AVG(), MAX(), MIN(), COUNT() 等&#xff09;的结果来过滤记录时&#xff0c;使用 HAVING 子句。 组合条件&#xff1a;HAVING 子句可以使用…

Nginx配置Https缺少SSL模块

1、Linux下Nginx配置https nginx下载和安装此处就忽略&#xff0c;可自行百度 1.1、配置https 打开nginx配置文件 vim /opt/app/nginx/conf/nginx.conf相关https配置 server {listen 443 ssl; #开放端口server_name echarts.net;#域名#redirect to https#ssl on; #旧版#ssl证…

ubuntu 利用阿里网盘API实现文件的上传和下载

文章目录 背景脚本初始化 阿里云盘API工具 aligo安装aligoaligo教程实战parse.py 演示上传文件上传文件夹下载文件下载文件夹 背景 最近在用ubuntu系统做实验&#xff0c;而ubuntu 系统的文件上传和下载操作很麻烦&#xff1b; 于是便打算使用阿里网盘的API 进行文件下载与上传…

VitePress 构建的博客如何部署到 Netlify 平台?

VitePress 构建的博客如何部署到 Netlify 平台&#xff1f; 前言 之前写了篇文章【使用 Vitepress 构建博客并部署到 github 平台】&#xff0c;有个老哥说 github page 访问太慢了&#xff0c;希望放到 Netlify 平台上面。 咱也没部署过&#xff0c;就试了一下&#xff0c;发…

JAVA面试专题-Redis

你在最近的项目中哪些场景使用了Redis 缓存 缓存穿透 缓存穿透&#xff1a;查询一个不存在的数据&#xff0c;mysql查询不到数据也不好直接写入缓存&#xff0c;导致每次请求都查数据库。 解决方案一&#xff1a;缓存空数据&#xff0c;即使查询返回的数据为空&#xff0c;也把…
最新文章