uni-app中vue3表单校验失败

目录

1.问题

2.原因及解决方式

3.表单校验方式(vue3)


1.问题

在app中使用uni-forms表单,并添加校验规则,问题是即使输入内容,表单校验依然失败。

代码:

<template><view><uni-forms ref="seedForm" :model="formData" :rules="rules" label-position="top"><uni-forms-item label="姓名" name="name"><input type="text" v-model="formData.name" placeholder="请输入姓名" /></uni-forms-item><uni-forms-item label="邮箱" name="email"><input class="input" v-model="formData.email" type="text" placeholder="请输入邮箱" /></uni-forms-item></uni-forms><button @click="submit">Submit</button></view>
</template><script lang="ts" setup>import { onReady } from "@dcloudio/uni-app";import { ref } from "vue";const seedForm = ref();const resetForm = () => {return {name: '',email: ''}};let formData = resetForm();const rules = {// 对name字段进行必填验证name: {rules: [{required: true,errorMessage: '请输入姓名'},{minLength: 3,maxLength: 5,errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'}],},// 对email字段进行必填验证email: {rules: [{required: true,errorMessage: '请输入邮箱'}],}};onReady(() => {seedForm.value.setRules(rules);})const submit = async () => {console.log(formData.value);// 1.// try { // 	await seedForm.value?.validate?.()// 	console.log("校验通过");// } catch (error){// 	console.log("校验失败");// }// 2.seedForm.value.validate().then(async ({ valid } : any) => {if (valid) {console.log("校验失败");} else {//验证成功console.log("校验成功");}});// 3.// seedForm.value.validate(valid => {// 	if (!valid) {// 		console.log("校验成功");// 	} else {// 		console.log('验证失败');// 		console.log(valid);// 	}// });// 4.// seedForm.value.validate().then(res => {// 	console.log('表单数据信息:', res);// 	// 清除验证// 	// form.value.clearValidate()// }).catch(err => {// 	console.log('表单错误信息:', err);// })}
</script><style></style>

2.原因及解决方式

表单绑定的数据不正确,外面需要套一层ref,声明响应式数据绑定到表单中。之前的那个写法确实不报错,但是不能把表单中输入的数据更新到formData中,导致校验一直报错。

修改前:	
let formData = resetForm();
修改后:
let formData = ref(resetForm());

3.表单校验方式(vue3)

定义校验规则-》修改表单结构-》绑定表单数据-》提交时校验

表单规则中各个项目的id要和表单中form-item中的name属性一致。

在vue中表单数据通过ref方式进行定义。

表单中需要追加rule,ref及model,分别定义校验规则,表单及表单绑定的数据

提交表单时校验方式有好几种。主要是先定义表单实例,通过表单实例中的value的validate判断校验是成功还是失败。

我上面的代码中一共有4中校验方式。第二种前端会报错,可以参照下其他几种方式。

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

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

相关文章

某个目录忘记添加git过滤了,不小心提交,如何只删除远程提交的目录而不删除本地?

某个目录忘记添加git过滤了&#xff0c;不小心提交&#xff0c;如何只删除远程提交的目录而不删除本地&#xff1f; 举例&#xff1a;今天新建了一个python项目&#xff0c;忘记把 .idea 和 pycache 添加到 .gitignore 文件了&#xff0c;直接推送到远程仓库&#xff0c;这样就…

vue中shift+alt+f格式化防止格式掉其它内容

好处就是使得提交记录干净&#xff0c;否则修改一两行代码&#xff0c;习惯性按了一下格式化快捷键&#xff0c;遍地飘红&#xff0c;下次找修改就费时间 1.点击设置图标-设置 2.点击这个转成配置文件 {"extensions.ignoreRecommendations": true,"[vue]":…

Android Glide自定义AppCompatImageView切分成若干小格子,每个小格子onDraw绘制Bitmap,Kotlin(1)

Android Glide自定义AppCompatImageView切分成若干小格子&#xff0c;每个小格子onDraw绘制Bitmap&#xff0c;Kotlin&#xff08;1&#xff09; 垂直方向的RecyclerView&#xff0c;每行一个AppCompatImageView&#xff0c;每个AppCompatImageView被均匀切割成n个小格子&#…

Games 103 作业三

Games 103 作业三 作业三的内容主要就是实现一下FVM。我们按照文档中的步骤&#xff0c;第一步就是去独立地更新mesh的速度和位置&#xff0c;在初始化每个顶点的受力时&#xff0c;需要考虑到重力的影响。 for(int i0 ;i<number; i) {//TODO: Add gravity to Force.Force[…

wsl安装虚拟机平台报错“无法解析服务器的名称或地址

wsl安装虚拟机平台报错“无法解析服务器的名称或地址” 1.问题 利用wsl安装拟机平台报错“无法解析服务器的名称或地址” 2.解决方案 修改DNS即可 控制面板->网络和Internet&#xff0c;选择查看网络状态和任务 选择更改适配器设置 选择所连接的网络&#xff0c;选择属性…

Java研学-Lambda表达式

一 Lambda表达式 – 箭头函数 1 含义 JDK8首次将函数式编程引入到Java代码中;这是一种新型的方法参数传递的方式;直接将获取参数的步骤传递给需要该参数的方法中–Lambda表达式 2 特点 1 简化代码 2 多核友好 3 面向对象思想不足 public class Play {public static void mai…

我不是DBA之慢SQL诊断方式

最近经常遇到技术开发跑来问我慢SQL优化相关工作&#xff0c;所以干脆出几篇SQL相关优化技术月报&#xff0c;我这里就以公司mysql一致的5.7版本来说明下。 在企业中慢SQL问题进场会遇到&#xff0c;尤其像我们这种ERP行业。 成熟的公司企业都会有晚上的慢SQL监控和预警机制。…

C++ Core Guidelines解析 ( 好书推荐 )

C Core Guidelines是Bjarne和 Herb Sutter发起编写的一个开源项目&#xff0c;汇聚了 C社区多年来积累的宝贵经验&#xff0c;是非常全面的编程最佳实践指导&#xff0c;包括代码风格、函数、类、错误处理、性能优化等&#xff0c;可以说是C社区的集大成者。用Effective Modern…

网络安全缓冲区溢出实验

实验要求实验步骤函数 f00()函数 f01()函数 f02() 实验要求 C 程序 homework08.c 的主函数如下&#xff1a; int main(int argc, char * argv[]) { init_buf(Lbuffer, LEN);switch(argc) {case 1: f00(); break;case 2: f01(); break;case 3: f02(); break; default: f00(); …

JIT/Just-In-Time Compilation

即时编译&#xff08;Just-In-Time Compilation&#xff0c;JIT&#xff09;是一种将程序在运行时动态地编译成机器代码的编译技术。相对于传统的静态编译&#xff0c;即时编译将编译过程延迟到程序执行的时候进行&#xff0c;而不是在程序执行之前。这种方法允许编译器根据程序…

国内AI大模型已近80个,哪个最有前途?

目前&#xff0c;国内已经推出了近80个人工智能大模型&#xff0c;这些大模型各有优势&#xff0c;难以直接判断哪个最有前途。然而&#xff0c;以下几个大模型值得关注&#xff1a; 1、华为云盘古大模型&#xff1a;盘古大模型聚焦于为行业服务&#xff0c;包括自然语言、视觉…

【Markdown】Markdown 公式书写

Markdown 公式书写 文章目录 Markdown 公式书写公式风格上下标以及希腊字母分式根式等结构函数名运算符矩阵写法行列式写法多行公式数学字母样式 公式风格 Markdown公式方面主要是用的Latex数学公式的写法&#xff08;也是不完全相同&#xff0c;比Latax少了一些内容&#xff…

出错:I/O文件读取JAVA

I/O文件读取 /** author:xiaowang* date:2023/12/6* demand:读取java1班的数据* * */ package homework;import java.io.FileNotFoundException; import java.io.FileReader; import java.io.IOException;public class FileReadTest {public static void main(String[] args) …

月入9K, 95后夫妻转行网优:人生路远,我们只愿携手前行!

用心专注一门课&#xff0c;让教育改变更多人是优橙教育成立的初心与使命。 在优小橙的教育生涯里&#xff0c;见过许多学生&#xff0c;他们或是因为追求一份美好的前程来优橙&#xff1b;或是想要改变泥泞的现状来优橙&#xff1b;或是因为想要深耕通信行业来优橙……理由很多…

【头歌系统Python实验】字符串处理

目录 第1关&#xff1a;字符串的拼接&#xff1a;名字的组成 第2关&#xff1a;字符转换 第3关&#xff1a;字符串查找与替换 如果对你有帮助的话&#xff0c;不妨点赞收藏评论一下吧&#xff0c;爱你么么哒&#x1f618;❤️❤️❤️ 第1关&#xff1a;字符串的拼接&#x…

Linux--程序地址空间

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 [TOC](文章目录) 一、程序地址空间回顾 我们在讲C语言的时候&#xff0c;老师给大家画过这样的空间布局…

Qt-Q_OBJECT宏使用与“无法解析的外部符号qt_metacall/metaObject/qt_metacast“

有时候我们编写Qt类的时候&#xff0c;修改代码时直接加上Q_OBJECT宏&#xff0c;然后直接构建&#xff0c;会报如下错误&#xff1a; 这里的几个函数的声明是由Q_OBJECT宏引入的&#xff0c;而其对应的实现是由moc实现的&#xff0c;如果我们更新了代码但是没有执行qmake&…

基于Java学生宿舍管理系统

基于Java学生宿舍管理系统 功能介绍&#xff1a; 1、用户管理&#xff1a;系统需要提供用户注册、登录和权限管理功能。管理员可以创建和管理学生、宿舍员工等用户账号&#xff0c;并设置不同的权限级别。 2、宿舍管理&#xff1a;系统需要能够管理宿舍的基本信息&#xff0…

SQL小技巧:where条件后为什么要写1=1?

【微信公众号&#xff1a;跟强哥学SQL】 相信第一次看到下面这个SQL的同学心里都不免会产生疑问。 SELECT * FROM employeesWHERE 11 为什么要在where条件中使用11这样的写法&#xff1f;这不是废话吗&#xff1f; 其实还真不是。 为什么使用11这样的条件&#xff1f; 在…

Linux网卡命名规则

Linux网卡命名规则 网卡命名 一、为什么需要这个 服务器通常有多块网卡&#xff0c;有板载集成的&#xff0c;同时也有插在PCIe插槽的。Linux系统的命名原来是eth0,eth1这样的形式&#xff0c;但是这个编号往往不一定准确对应网卡接口的物理顺序。 为解决这类问题&…