【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,一经查实,立即删除!

相关文章

通过Pytest 多数据库连接实例了解Python工厂模式与单例模式的区别

1. 前言 在做自动化测试时&#xff0c;有些特殊项目需要连接不同的数据库进行造数或者断言。自动化框架中&#xff0c;一般使用Pytest yaml 数据驱动的居多&#xff0c;如果一个项目中有上百条数据库相关测试用例&#xff0c;在数据库测试时&#xff0c;如果设计不合理的连接模…

【大模型】直接在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;管理员工和员工留言以及员工工资&…

[经验分享]OpenCV显示上一次调用的图片的处理方法

最近在研究OpenCV时发现&#xff0c;重复调用cv::imshow("frame", frame)时&#xff0c;会显示出上一次的图片。 网上搜索了方法&#xff0c;有以下3种因素可能导致&#xff1a; 1. 图像变量未正确更新&#xff1a;可能在更新 frame 变量之前就已经调用了 imshow。…

Stream流将List列表中的每个对象赋值给另外一个List列表中的每个对象

源代码&#xff1a; public void repetition(Long id) {// 查询当前用户idLong userId BaseContext.getCurrentId();// 根据订单id查询当前订单详情List<OrderDetail> orderDetailList orderDetailMapper.getByOrderId(id);// 将订单详情对象转换为购物车对象List<…

搭建 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格式&#…

C#、ASP、ASP.NET、.NET、ASP.NET CORE区别、ASP.NET Core其概念和特点、ASP.NET Core个人心得体会

C#是一种面向对象的编程语言&#xff0c;主要用于开发跨平台的应用程序。它是.NET框架的一部分&#xff0c;并且可以在.NET平台上运行。 ASP&#xff08;Active Server Pages&#xff09;是一种用于构建动态Web页面的技术&#xff0c;使用VBScript或JScript作为服务器端脚本语…

vue3 计算属性(computed)和监听属性(watch)的异同

计算属性(computed) //使用计算属性 {{fullName}} //使用方法 {{fullName() }}const firstNameref("杰克") const lastNameref("麻子") //计算属性 const fullNamecomputed(()>firstName.value"-"lastName.value) //方法 const fullName()&g…

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的基本理念和基础…

day27|leetcode|C++| 39. 组合总和 | 40. 组合总和 II |131. 分割回文串

Leetcode 39. 组合总和 链接&#xff1a;39. 组合总和 class Solution { private:vector<vector<int>> result; // 用于存放符合条件的结果集合vector<int> path; // 用于存放当前的路径// 回溯函数&#xff0c;用于搜索符合条件的组合// candidates: 候选…

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

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

云原生周刊:Istio 加入 Phippy 家族 | 2024.3.18

开源项目推荐 ko "ko" 是一个用于构建和部署 Go 应用程序的简单、快速的容器镜像构建工具。它适用于那些镜像中只包含单个 Go 应用程序且没有或很少依赖于操作系统基础镜像的情况&#xff08;例如没有 cgo&#xff0c;没有操作系统软件包依赖&#xff09;。"k…

内网安全之-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…

XML语言的学习记录3-解析

学习笔记&#xff1a; 一、 解析XML文档&#xff1a; 1.使用 XMLHttpRequest 对象&#xff0c;将xml文档放入XML DOM对象中&#xff1a; xmlhttpnew XMLHttpRequest(); xmlhttp.open("GET","books.xml",false); xmlhttp.send(); xmlDocxmlhttp.response…