uniapp + uView动态表单校验

news2024/11/18 19:28:51

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

页面:

		<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.coloradmin.cn/o/1637140.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于Springboot+Vue的Java项目-家政服务平台系统开发实战(附演示视频+源码+LW)

大家好&#xff01;我是程序员一帆&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &am…

如果通过Glide 设置图片圆角

要给图片设置一个圆角,通常方法是在ImageView 标签外添加一个CardView 标签,然后设置圆角值,但是今天遇到一个问题就是 RecyclerView Item 中这样操作的话会遇到这样的一个报错: Cannot call this method while RecyclerView is computing a layout or scrolling androidx.rec…

数据结构----顺序表详解

顺序表的定义 顺序表&#xff08;SeqList&#xff09;属于线性表的同一种&#xff0c;它同样具有线性的存储结构&#xff0c;以下是百度百科关于顺序表的定义&#xff1a; 总结下来&#xff0c; 在结构上&#xff0c;顺序表实际上的底层结构就是数组&#xff0c;而顺序表本身也…

链表-----返回倒数第K个节点回文结构的判断相交链表

目录 1.返回倒数第K个节点 2.回文结构的判断 3.相交链表的判断&#xff0c;返回交点 1.返回倒数第K个节点 &#xff08;1&#xff09;返回链表的第k个节点&#xff0c;我们这里的做法是定义两个指针&#xff0c;这两个指针之间相差的是k这个长度&#xff1b;这个过程的实现就…

网络安全知识点

网络安全 1&#xff0e; 网络安全的定义&#xff0c;网络安全的属性。 定义&#xff1a;针对各种网络安全威胁研究其安全策略和机制&#xff0c;通过防护、检测和响应&#xff0c;确保网络系统及数据的安全性。 属性&#xff1a;机密性 认证&#xff08;可鉴别性&#xff09…

手把手带你一起搭建Seata,结合SpringCloud alibaba实战(二)

手把手带你一起搭建Seata&#xff0c;结合SpringCloud alibaba实战&#xff08;二&#xff09; 前言具体实现大致流程配置微服务订单服务库存服务 测试订单服务异常库存服务异常 总结 接下来的一段时间论文解说要暂时放一放&#xff0c;咱们一起来了解下微服务方面的知识&#…

Web-SpringBootWeb

创建项目 后面因为报错&#xff0c;所以我把jdk修改成22&#xff0c;仅供参考。 定义类&#xff0c;创建方法 package com.start.springbootstart.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotati…

使用nacos实现注册中心和配置中心

实现注册中心 在pom文件中导入 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId> </dependency> 在bootstrap.yml中写下如下配置 spring:application:name: c…

安卓中对象序列化面试问题及回答

1. 什么是对象的序列化&#xff1f; 答&#xff1a; 序列化是将对象转换为字节流的过程&#xff0c;以便将其存储在文件、数据库或通过网络传输。反序列化则是将字节流重新转换为对象的过程。 2. 为什么在 Android 开发中需要对象的序列化&#xff1f; 答&#xff1a; 在 An…

一些优雅的监控运维技巧

准备工作 安装 sysstat sudo apt install sysstat查看某个进程的cpu情况 pidstst -u -p 256432查看某个进程的RAM情况 pidstst -r -p 256432查看某个进程的IO情况 pidstst -d -p 256432查看某个进程下的线程执行情况 pidstst -t -p 256432查看指定PID的进程对应的可执行文件…

2024五一杯数学建模C题思路分享 - 煤矿深部开采冲击地压危险预测

文章目录 1 赛题选题分析 2 解题思路2.1 问题重述2.2 第一问完整思路2.2 二、三问思路更新 3 最新思路更新 1 赛题 C题 煤矿深部开采冲击地压危险预测 煤炭是中国的主要能源和重要的工业原料。然而&#xff0c;随着开采深度的增加&#xff0c;地应力增大&#xff0c;井下煤岩动…

前端开发攻略---用原生JS在网页中也能实现文本转语音

1、原理 语音合成 (也被称作是文本转为语音&#xff0c;英语简写是 tts) 包括接收 app 中需要语音合成的文本&#xff0c;再在设备麦克风播放出来这两个过程。 Web API中对此有一个主要控制接口 SpeechSynthesis&#xff0c;外加一些处理如何表示要被合成的文本 (也被称为 utte…

6.C++模板(超全)

// 【思考】代码截屏&#xff0c;用荧光笔标写注释 挺清晰的&#xff0c;虽然不太整齐了&#xff08;在文末有尝试这种方法~&#xff09;&#xff0c;就是感觉 // 注释没有那么突出和强调&#xff0c;友友们要不讨论一下&#xff0c;不知道你们看起来是什么感觉&#xff0c;我…

Python 与 TensorFlow2 生成式 AI(一)

原文&#xff1a;zh.annas-archive.org/md5/d06d282ea0d9c23c57f0ce31225acf76 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 序言 “想象力比知识更重要。” – 阿尔伯特爱因斯坦&#xff0c;《爱因斯坦关于宇宙宗教和其他见解与格言》&#xff08;2009&#xff09;…

安全再升级,亚信安慧AntDB数据库与亚信安全二次牵手完成兼容性互认证

日前&#xff0c;湖南亚信安慧科技有限公司&#xff08;简称&#xff1a;亚信安慧&#xff09;的产品与亚信科技&#xff08;成都&#xff09;有限公司&#xff08;简称&#xff1a;亚信安全&#xff09;再次携手&#xff0c;完成亚信安慧AntDB数据库与亚信安全IPoE接入认证系统…

【进程通信】用命名管道模拟server和client之间的通信

关于命名管道 当了解了匿名管道的通信机制只能用于具有血缘关系的进程之间时&#xff0c;似乎是出于本能的提出疑问–如果两个进程没有任何关系呢&#xff1f; 假如两个进程之间没有血缘关系&#xff0c;彼此进程就没法轻易拥有对方的文件资源&#xff0c;即不能看到同一份共…

C++Day 7 作业

1、lambda #include <iostream>using namespace std;int main() {int a 100;int b 90;int temp;auto fun [&]()mutable->int {temp a;ab;btemp;};fun();cout<<a<<endl;return 0; } 2、vector #include <iostream> #include <vector>…

Linux 第十七章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

Python 与 TensorFlow2 生成式 AI(三)

原文&#xff1a;zh.annas-archive.org/md5/d06d282ea0d9c23c57f0ce31225acf76 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第七章&#xff1a;使用 GAN 进行风格转移 神经网络在涉及分析和语言技能的各种任务中正在取得进步。创造力是人类一直占有优势的领域&…

探索潜力:中心化交易所平台币的对比分析

核心观点 平台币在过去一年里表现差异显著&#xff1a; 在过去的一年里&#xff0c;只有少数几个平台币如BMX、BGB和MX的涨幅超过了100%。相比之下&#xff0c;由于市值较高&#xff0c;BNB和OKB的涨幅相对较低。 回购和销毁机制在平台币价值中起决定性作用&#xff1a; 像M…