uniapp 单表、多级动态表单添加validateFunction自定义规则
uniapp 多级动态表单添加自定义规则
在uniapp制作小程序时,当涉及到需要设置validateFunction的校验规则时。可能遇到的问题
1、validateFunction不生效,没有触发
2、多层级表单怎么添加validateFunction自定义校验规则
本文将以单表单校验和多表单校验分类描述
单表单自定义规则校验
要注意的是:
1、去掉:rules=“rules”,因为表单再校验时validateFunction会不执行
2、本文中photoList是自定义组件,主要结构为数组,可按照自己的需求填写
3、须在onReady()内设置规则、
<template><uni-forms ref="baseForm" :modelValue="baseFormData" label-position="left" label-width="150rpx"><uni-forms-item label="现场拍照" required name="imageList"><photoList v-model="baseFormData.imageList" limit="9"></photoList></uni-forms-item></uni-forms><u-button class="button" type="primary" shape="circle" @click="submit('baseForm')">提交</u-button>
</template>
<script>
export default {data() {return {dynamicRules: {imageList: {rules: [{required: true,errorMessage: '最少一张图片'}, {validateFunction: (rule, value, data, callback) => {// 异步需要返回 Promise 对象return new Promise((resolve, reject) => {setTimeout(() => {//按照自己的需要填写}, 500)})}}]},}},onReady() {/* 这里,我们通过refs拿到增加的内容,然后setRules */this.$refs.baseForm.setRules(this.dynamicRules)},methods:{// 提交submit(ref) {this.$refs[ref].validate().then(res => {}).catch(err => {this.$modal.alert(err[0].errorMessage)})},}
}
</script>
多层级表单规则校验
要注意的是:
1、多层级表单与单层级外部校验相同,不同的是需要在新增子项或者原表单中有子项遍历时,先渲染,后添加规则。
2、给子项uni-from-item组件添加ref用于判断校验位置。
<template><uni-forms ref="baseForm" :modelValue="baseFormData" label-position="left" label-width="150rpx"><view v-for="(item,index) in baseFormData.inspectionCustodyWorkLogDetailBoList" :key='index'><uni-forms-item label="照片" required :ref="'inspectionCustodyWorkLogDetailBoList-'+index":rules="[{required: true,errorMessage: `检查${index+1}图片不能为空`}]" :name="['inspectionCustodyWorkLogDetailBoList',index,'imagelist']" label-width="100rpx"><view class="form-item"><photoListv-model="baseFormData.inspectionCustodyWorkLogDetailBoList[index].imagelist"limit="9"></photoList></view></uni-forms-item></view></view><view ><u-button type="primary" icon="plus-square-fill" @click="add" plain:hairline="false">新增检查项</u-button></view></uni-forms><u-button class="button" type="primary" shape="circle" @click="submit('baseForm')">提交</u-button>
</template>
<script>
export default {data() {return {baseFormData: {inspectionCustodyWorkLogDetailBoList: [], //检查记录},dynamicRules: {// 基础表单数据imageList: {rules: [{required: true,errorMessage: '最少一张图片'}, {validateFunction: (rule, value, data, callback) => {// 异步需要返回 Promise 对象return new Promise((resolve, reject) => {setTimeout(() => {//按照自己的需要填写}, 500)})}}]},}},onReady() {/* 这里,我们通过refs拿到增加的内容,然后setRules */this.$refs.baseForm.setRules(this.dynamicRules)},methods:{// 选择企业这是在父表单需获取子项时增加company(val) {if (val != undefined) {// 获取企业必检项这是举例this.mustDeal = [{checkContent:1,inspectionItemType:1,riskLocation:2},{checkContent:1,inspectionItemType:1,riskLocation:2}]//循环获取内容添加至表单中this.mustDeal.forEach((item, index) => {this.baseFormData.inspectionCustodyWorkLogDetailBoList.push({checkContent: item.checkContent,images: null,inspectionItemType: item.inspectionItemType,riskLocation: item.riskLocation,id: Date.now(),imagelist: [],isPass: null, //是否合格isMustCheck: 1,})})/* 这里,我们通过refs拿到增加的内容,然后setRules */this.$nextTick(() => {/* 用nextTick是让界面先渲染 *//* 根据html中的ref规则,获取到uni-forms-item */this.baseFormData.inspectionCustodyWorkLogDetailBoList.forEach((ite, inde) => {// // rules[`imagelist`]=this.dynamicRules.imagelist.ruleslet $Item = this.$refs['inspectionCustodyWorkLogDetailBoList-' + inde];/* 对这个uni-forms-item主动setRules *//* 这里直接设置的是对应字段的rules */$Item[0].setRules(this.dynamicRules.imagelist.rules);})})} },// 新增检查项add() {this.baseFormData.inspectionCustodyWorkLogDetailBoList.push({checkContent: null,images: null,id: Date.now(),imagelist: [],isPass: null, //是否合格isMustCheck: 0, //非必检})/* 这里,我们通过refs拿到增加的内容,然后setRules */this.$nextTick(() => {/* 用nextTick是让界面先渲染 *//* 根据html中的ref规则,获取到uni-forms-item */let $Item = this.$refs['inspectionCustodyWorkLogDetailBoList-' + (this.baseFormData.inspectionCustodyWorkLogDetailBoList.length - 1)];/* 对这个uni-forms-item主动setRules *//* 这里直接设置的是对应字段的rules */$Item[0].setRules(this.dynamicRules.imagelist.rules);});},// 提交submit(ref) {this.$refs[ref].validate().then(res => {}).catch(err => {//输出报错信息this.$modal.alert(err[0].errorMessage)})},}
}
</script>
以上是本人工作中为解决问题使用,不足之处还望指出。
相关文章:
uniapp 单表、多级动态表单添加validateFunction自定义规则
uniapp 多级动态表单添加自定义规则 在uniapp制作小程序时,当涉及到需要设置validateFunction的校验规则时。可能遇到的问题 1、validateFunction不生效,没有触发 2、多层级表单怎么添加validateFunction自定义校验规则 本文将以单表单校验和多表单校…...
FPGA高端图像处理培训第一期,提供工程源码+视频教程+FPGA开发板
目录 1、FPGA图像处理培训现状分析2、本FPGA图像处理培训优势亮点架构全起点高实用性强项目应用级别细节恐怖工程源码清晰 3、本FPGA图像处理培训内容介绍图像处理基本框架图像前处理框架图像中处理框架图像前中处理框架图像后处理框架图像中后处理框架图像处理仿真框架视频教程…...
顺序表的实现(数据结构)——C语言
目录 1.结构与概念 2.分类 3 动态顺序表的实现 SeqList.h SeqList.c 创建SLInit: 尾插SLPushBack以及SLCheak(检查空间是否足够): 头插SLPushFront: 尾删SLPopBack 头删SLPopFront 查找指定元素SLFind 指定…...
【VUE】Vue中 computed计算属性和watch侦听器的区别
核心功能不同 computed 是一个计算属性,其核心功能是基于已有的数据属性计算得出新的属性值。当某个依赖的数据发生变化时,computed 会自动重新计算并更新自己的值。因此,可以将 computed 看做是一种“派生状态”。 watch 是一个观察者函数&…...
linux线程 | 同步与互斥 | 深度学习与理解同步
前言:本节内容主要讲解linux下的同步问题。 同步问题是保证数据安全的情况下,让我们的线程访问具有一定的顺序性。 线程安全就规定了它必须是在加锁的场景下的!!那么, 具体什么是同步问题, 我们加下来看看吧…...
Tkinter Frame布局笔记--做一个简易的计算器
#encodingutf-8 import tkinter import re import tkinter.messagebox import tkinter.simpledialog import sys import os def get_resources_path(relative_path):if getattr(sys,frozen, False):base_pathsys._MEIPASS#获取临时文件else:base_pathos.path.dirname(".&q…...
算法专题八: 链表
目录 链表1. 链表的常用技巧和操作总结2. 两数相加3. 两两交换链表中的节点4. 重排链表5. 合并K个升序链表6. K个一组翻转链表 链表 1. 链表的常用技巧和操作总结 常用技巧 画图!!! 更加直观形象, 便于我们理解引入虚拟头节点, 方便我们对链表的操作, 减少我们对边界情况的考…...
MySQL中关于NULL值的六大坑!你被坑过吗?
NULL值是我们在开发过程中的老朋友了,但是这个老朋友在MySQL中有很多坑,我通过这篇文章来总结分享一下,欢迎大家在评论区分享你的看法和踩坑经历。 1、NULL不等于NULL 在MySQL中,执行以下SQL会返回NULL 假如t表有以下数据&#…...
学生学习动机测试:激发潜能,引领未来
学习动机、学习兴趣和学习目标制定是影响学生学习成效的三个关键因素。通过对学生学习动机的测试,我们可以深入了解学生的学习状态,进而采取针对性的措施,激发他们的学习潜能,引导他们走向更加光明的未来。本文将从学习动机、学习兴趣和学习目标制定三个方面,详细探讨学生…...
基于SSM党务政务服务热线管理系统的设计
管理员账户功能包括:系统首页,个人中心,用户管理,部门管理,办事信息管理,信息记录管理,系统管理 前台账号功能包括:系统首页,个人中心,部门,信息…...
OSI参考模型详解:初学者指南与实践案例
OSI参考模型详解:初学者指南与实践案例 OSI(Open System Interconnect)参考模型是一个由国际标准化组织(ISO)提出的七层网络分层模型,它为全球所有互联计算机系统提供了一个通用的通信框架,解决…...
S7-200 SMART 与 S7-1200 之间 TCP 通信— S7-200 SMART 作为服务器
TCP 协议通信 TCP 通信为面向连接的通信,需要双方都调用指令以建立连接及交换数据。S7-200 SMART 与 S7-1200 通过 TCP 通信,在 S7-1200 调用 T-block 指令 ( TCON, TDISCON, TSEND, TRCV ) ,在 S7-200 SMART 调用 Open User Communication …...
Java @RequestPart注解:同时实现文件上传与JSON对象传参
RequestPart注解:用于处理multipart/form-data请求的一部分,通常用于文件上传或者处理表单中的字段。 java后端举例: PostMapping("/fileTest")public AjaxResult fileTest(RequestPart("file") MultipartFile file,Req…...
深度学习基础知识-02 数据预处理
深度学习的数据预处理通常包括: 1.数据清洗:去除错误或不完整的数据。 2.归一化:调整数据范围,如将像素值缩放到0-1。 3.数据增强:通过旋转、缩放等方法增加数据多样性。 4.数据划分:将数据分为训练集、验证…...
【CTF刷题9】2024.10.19
[MoeCTF 2021]babyRCE 考点:关键词过滤(绕过方法参考往期博客) 来源:nssctf <?php$rce $_GET[rce]; if (isset($rce)) {if (!preg_match("/cat|more|less|head|tac|tail|nl|od|vi|vim|sort|flag| |\;|[0-9]|\*|\|\%|\&g…...
WPF中的Setter
在 WPF (Windows Presentation Foundation) 中,Setter 是一个定义控件属性值的标记,通常用在 Style 或 Template 中。Setter 用于指定当某些条件满足时,控件的属性应该如何设置。以下是 Setter 的一些关键点: 属性设置:…...
RabbitMQ下载与配置
安装Erlang Erlang 下载地址如下: https://erlang.org/download/otp_versions_tree.html 安装 RabbitMQ RabbitMQ 下载地址如下: https://www.rabbitmq.com/install-windows.html 查看服务,服务已经正常启动 打开Command Prompt 输入rabb…...
【数据结构与算法】力扣 54. 螺旋矩阵
问题描述 给你一个 m 行 n 列的矩阵 matrix ,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素。 示例 1: 输入: matrix [[1,2,3],[4,5,6],[7,8,9]] 输出: [1,2,3,6,9,8,7,4,5]示例 2: 输入: ma…...
速通不了的人工智能
下面是一个详细且系统的人工智能学习框架,涵盖了从基础理论到实际应用的各个方面。这个框架包括理论学习、编程实践、项目实战和资源推荐。为了帮助你更好地理解和应用,我会提供一些具体的代码示例。 人工智能学习框架 1. 基础理论 1.1 数学基础 线性代数:向量、矩阵、特…...
微信新功能上线,找工作也能“附近”搞定
大家好,我是小悟 你们听说了吗?微信又双叒叕出新功能啦!这次可不是什么微整形、小游戏之类的小打小闹,而是实实在在的大招——查找附近的工作!没错,你没听错,就是那个在你家门口就能找到工作的…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
【JavaWeb】Docker项目部署
引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计,聪明的码友立马就知道了,该到数据访问模块了,要不就这俩玩个6啊,查库势在必行,至此,它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据(数据库、No…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
GitFlow 工作模式(详解)
今天再学项目的过程中遇到使用gitflow模式管理代码,因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存,无论是github还是gittee,都是一种基于git去保存代码的形式,这样保存代码…...
