【uniapp】表单验证不生效的解决方案

表单验证这个常见的功能,明明在element ui等框架已经用的很熟了,在uniapp开发时还是处处碰壁?这篇文章我会提示uni-forms表单验证的几个注意点,帮助大家排查。

示例

下面是一份包含普通验证和自定义验证的示例:

<uni-forms ref="baseForm" :rules="rules" :modelValue="form"><uni-forms-item label="姓名" required name="name"><uni-easyinput v-model="form.name" placeholder="请输入姓名" /></uni-forms-item><uni-forms-item label="描述" required name="desc"><uni-easyinput type="textarea" autoHeight maxlength="300" v-model="form.desc" placeholder="请输入内容"></uni-easyinput></uni-forms-item>
</uni-forms>
form: {name: '',desc: ''
},
rules: {name: {rules: [{required: true,errorMessage: '姓名不能为空'}]},desc: {rules: [{required: true,errorMessage: '请输入描述'}, {validateFunction: function(rule, value, data, callback) {if (value.length < 20) {callback('描述字数需大于20字')}return true}}]}
}
this.$refs.baseForm.validate().then(res => {// 校验成功
}).catch(err => {console.log('表单错误信息:', err);
})

出现问题时按照以下步骤排查:

1.确认组件的安装

检查uni-forms,uni-easyinput,uni-data-picker等当前用到的组件是不是已经全部在插件市场下载导入了。

2.检查各个属性的设置

uni-forms上的ref,rules,modelValue,uni-forms-item的name缺一不可

name就相当于element里的prop,这个很容易漏掉!另外modelValue绑定的表单对象需要和uni-easyinput等表单组件的v-model对应上。比如这里modelValue绑定的form,表单里就只能绑定form.name等form里的字段。

 3.检查rules的数据结构

这个定义有点繁琐,我就这里犯错了。注意rules里的字段名里还要嵌套rules,然后这里的rules里才是数组格式。而不是像element的写法name里就直接是数组了。

4.检查调用validate的语法

首先肯定是检查refs后的名字和当时uni-forms绑定的ref是不是一致。然后注意语法是validate().then(res),而不是validate(res),这是我第二个犯错的地方,需要特别注意。

​​​​​​​

5.检查调用时ref是否存在

如果表单在弹窗等需要显示隐藏的场景,可能会遇到这个问题。打印ref看是否存在,这里的例子是console.log(this.$refs.baseForm),如果不存在肯定是报错,需要nextTick后表单dom加载完成了再调用validate进行验证。

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

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

相关文章

【大模型】直接在VS Code(Visual Studio Code)上安装CodeGeeX插件的过程

文章目录 一、什么是CodeGeeX&#xff08;一&#xff09;我理解的CodeGeeX&#xff08;二&#xff09;优缺点 二、CodeGeex下载、安装、注册&#xff08;一&#xff09;安装VS Code(Visual Studio Code)&#xff08;二&#xff09;下载安装CodeGeeX&#xff08;三&#xff09;注…

Java项目:59 ssm小型企业办公自动化系统的设计和开发+vue

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 系统可以提供信息显示和相应服务&#xff0c; 其管理员管理部门经理&#xff0c;管理总经理&#xff0c;管理员工和员工留言以及员工工资&…

搭建 es 集群

一、VMware准备机器 首先准备三台机器 这里我直接使用 VMware 构建三个虚拟机 都是基于 CentOS7 然后创建新用户 部署 es 需要单独创建一个用户&#xff0c;我这里在构建虚拟机的时候直接创建好了 然后将安装包上传 可以使用 rz 命令上传&#xff0c;也可以使用工具上传 工…

RK3588_Qt交叉编译环境搭建

buildroot编译 进入 /home/linux/plat/rk3588/sdk/buildroot 目录下&#xff0c;执行 Source ./envsetup.sh 选择具体平台编译&#xff0c;后再执行make编译 /home/linux/plat/rk3588/sdk/buildroot/output/OK3568/images 生成的rootfs.ext2镜像重新烧写到rk3568开发板中&…

PHP姓名快速匿名化工具(重组脱敏)

PHP姓名重组工具(脱敏/匿名化工具) 将excel数据姓名列粘贴提交&#xff0c;得到随机姓随机中间字随机尾字的重组姓名 那些年自用瞎搞的代码&#xff0c;今日整理成网页交提交得到结果的交互功能分享。 <?php //PHP姓名重组工具(脱敏/匿名化工具) //将excel数据姓名列粘贴…

elk收集k8s微服务日志

一、前言 使用filebeat自动发现收集k8s的pod日志&#xff0c;这里分别收集前端的nginx日志&#xff0c;还有后端的服务java日志&#xff0c;所有格式都是用json格式&#xff0c;建议还是需要让开发人员去输出java的日志为json&#xff0c;logstash分割java日志为json格式&#…

DockerFile遇到的坑

CMD 命令的坑 dockerfile 中的 CMD 命令在docker run -it 不会执行 CMD 命令。 FROM golang WORKDIR / COPY . ./All-in-one CMD ["/bin/sh","-c","touch /kkk.txt && ls -la"] RUN echo alias ll"ls -la" > ~/.bashrc(不…

C语言数组—二维数组

二维数组的创建 //数组创建 int arr[3][4]; //三行四列&#xff0c;存放整型变量 double arr[2][4];二维数组的初始化 我们如果这样初始化&#xff0c;效果是什么样的呢 int arr[3][4] { 1,2,3,4,5,6,7,8,9,10,11,12 };那如果我们不写满十二个呢 int arr[3][4] { 1,2,3,4…

一文快速掌握docker的理念和基本使用

写在文章开头 写于一个周末&#xff0c;在复盘梳理文章时候发现这一篇关于早期了解docker时记录的文档&#xff0c;仔细阅读了一下&#xff0c;为了保证文章更加清晰以便读者使用。故再次重新一次梳理一次&#xff0c;通过这篇文章&#xff0c;你将会对docker的基本理念和基础…

Stable Diffusion WebUI 生成参数:采样器(Sampling method)和采样步数(Sampling steps)

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 大家好&#xff0c;我是水滴~~ 本文将深入探讨Stable Diffusion WebUI生成参数中的采样器和采样步数&#xff0c;旨在为读者呈现一个全面而细致的解析。我们将从采样器和采样步数的概念出发&…

内网安全之-NTLM协议详解

NTLM&#xff08;New Technology LAN Manager&#xff09;身份验证协议是微软用于Windows身份验证的主要协议之一。早起SMB协议以明文口令的形式在网络上传输&#xff0c;因此产生了安全性问题。后来出现了LM&#xff08;LAN Manager&#xff09;身份验证协议&#xff0c;它非常…

数据可视化实战(二)

将每个城市在每个月份平均PM2.5绘制成折线图 import pandas as pd import matplotlib.pyplot as plt df pd.read_excel(./PM2.5.xlsx)display(df.head(10)) df.shape # (161630, 15)城市年份月份日期小时季节PM2.5露点湿度压强温度风向累计风速降水量累计降水量0北京2010112…

qt+ffmpeg 实现音视频播放(二)之音频播放

一、音频播放流程 1、打开音频文件 通过 avformat_open_input() 打开媒体文件并分配和初始化 AVFormatContext 结构体。 函数原型如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *url, AVInputFormat *fmt, AVDictionary **options); 参数说…

Docker的简介及安装

Docker 是什么 Docker是在Linux容器里运行应用的开源工具&#xff0c;是一种轻量级的“虚拟机”。诞生于2013年&#xff0c;最 初的发起者是dotCloud公司&#xff0c;后来改名为Docker Inc&#xff0c;专注于Docker 相关技术和产品的开发。Docker 项目目前已经加入了Linux基金会…

【办公类-22-11】周计划系列(5-3)“周计划-03 周计划内容循环修改“ (2024年调整版本)

背景需求&#xff1a; 前文从原来的“新模版”文件夹里提取了周计划主要内容和教案内容。 【办公类-22-10】周计划系列&#xff08;5-2&#xff09;“周计划-02源文件docx读取5天“ &#xff08;2024年调整版本&#xff09;-CSDN博客文章浏览阅读1.1k次&#xff0c;点赞29次&…

基于消失点的相机自标定

基于消失点的相机自标定 附赠最强自动驾驶学习资料&#xff1a;直达链接 相机是通过透视投影变换来将3D场景转换为2D图像。在射影变换中&#xff0c;平行线相交于一点称之为消失点。本文详细介绍了两种利用消失点特性的标定方法。目的是为根据实际应用和初始条件选择合适的标…

边缘计算+WEB端应用融合:AI行为识别智能监控系统搭建指南 -- 云端系统数据库设计(五)

专栏目录 边缘计算WEB端应用融合&#xff1a;AI行为识别智能监控系统搭建指南 – 整体介绍&#xff08;一&#xff09; 边缘计算WEB端应用融合&#xff1a;AI行为识别智能监控系统搭建指南 – 边缘设备图像识别及部署&#xff08;二&#xff09; 边缘计算WEB端应用融合&#xf…

【开发】Redis 的理解与数据存储格式

目录 相关传送门 1. NOSQL和关系型数据库比较 2. 主流的NOSQL产品 3. Redis的理解 4. redis数据存储格式 4.1 String 4.2 Hash 4.3 List 4.4 Set 4.5. sorted_set 注&#xff1a;手机端浏览本文章可能会出现 “目录”无法有效展示的情况&#xff0c;请谅解&#xf…

Hive:数据仓库利器

1. 简介 Hive是一个基于Hadoop的开源数据仓库工具&#xff0c;可以用来存储、查询和分析大规模数据。Hive使用SQL-like的HiveQL语言来查询数据&#xff0c;并将其结果存储在Hadoop的文件系统中。 2. 基本概念 介绍 Hive 的核心概念&#xff0c;例如表、分区、桶、HQL 等。 …

Tomcat Session ID---会话保持

简单拓补图 一、负载均衡、反向代理 7-1nginx代理服务器配置 [rootdlnginx ~]#yum install epel-release.noarch -y ###安装额外源[rootdlnginx ~]#yum install nginx -y[rootdlnginx ~]#systemctl start nginx.service[rootdlnginx ~]#systemctl status nginx.service [ro…