uni-app中vue3表单校验失败的问题及解决方法

 更新时间:2023年12月07日 12:00:13   作者:linab112  
最近遇到这样的问题在app中使用uni-forms表单,并添加校验规则,问题是即使输入内容,表单校验依然失败,本文给大家分享uni-app中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中校验方式。第二种前端会报错,可以参照下其他几种方式。

补充:

关于uniapp开发使用uni-ui组件表单校验一直不通过的原因及解决方案

今天使用uniapp开发东西的时候,发现我的表单校验一直通不过,后面才发现少东西了。我在uni-forms上少放了modelValue,但在官方文档上没有提示。所以要做验证必须加这个属性。

因为直接像下面这样写也是可以双向绑定的,谁能想到,

<uni-easyinput  v-model="drawerData.name" placeholder="" />

uni-forms表单校验必加属性:

:rules=""//这是校验规则
:modelValue=""//这是要校验的数据对象
uni-forms-item 的name属性和表单v-model的属性值保持一直
<uni-forms ref="drawerform" label-width="80" :rules="rules" class="drawer-form" :model="drawerData">
rules: {//表单校验规则
                    name: {
                        rules: [{
                                required: true,
                                errorMessage: '请输入商品名称',
                                trigger: ['blur', 'change']
                            },
                            {
                                minLength: 2,
                                errorMessage: '名称两个字符以上',
                            }
                        ],
                        label:"商品名称"
                    },
}

至于校验规则根据官方网站来就行了,细心一点就没问题

到此这篇关于uni-app中vue3表单校验失败的文章就介绍到这了,更多相关uni-app表单校验失败内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)

    vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)

    这篇文章主要介绍了vue在页面和方法中如何通过遍历对象获取对象的键(key)和值(value)问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue 2.0中生命周期与钩子函数的一些理解

    Vue 2.0中生命周期与钩子函数的一些理解

    这篇文章主要给大家介绍了关于Vue 2.0中生命周期与钩子函数的相关资料,对大家学习或者使用vue2.0具有一定的参考学习价值,需要的朋友们下面随小编一起来看看吧。
    2017-05-05
  • Vue命令式组件的编写与应用小结

    Vue命令式组件的编写与应用小结

    这篇文章主要介绍了Vue命令式组件的编写与应用小结,在这篇文章中,我会带你了解命令式组件的基本概念,并通过一些简单的示例来展示它们是如何工作的,需要的朋友可以参考下
    2024-03-03
  • antfu大佬的v-lazy-show教我学会了怎么编译模板指令

    antfu大佬的v-lazy-show教我学会了怎么编译模板指令

    这篇文章主要介绍了antfu大佬的v-lazy-show,我学会了怎么编译模板指令示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • vue3响应式Object代理对象的读取示例详解

    vue3响应式Object代理对象的读取示例详解

    这篇文章主要为大家介绍了vue3响应式Object代理对象的读取示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue使用lodop实现打印小结

    Vue使用lodop实现打印小结

    这篇文章主要介绍了Vue使用lodop打印小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • VUE 记账凭证模块组件的示例代码

    VUE 记账凭证模块组件的示例代码

    这篇文章主要介绍了VUE记账凭证模块组件的实例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • vue3 setup中父组件通过Ref调用子组件的方法(实例代码)

    vue3 setup中父组件通过Ref调用子组件的方法(实例代码)

    这篇文章主要介绍了vue3 setup中父组件通过Ref调用子组件的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • 详解Vue进阶构造属性

    详解Vue进阶构造属性

    这篇文章主要介绍了Vue进阶构造属性,从4个方面来进行讲解:Directive、Mixin 混入、Extends 继承、provide 和 inject,感兴趣的小伙伴们,赶快来看一下
    2021-05-05
  • 如何解决this.$refs.form.validate()不执行的问题

    如何解决this.$refs.form.validate()不执行的问题

    这篇文章主要介绍了如何解决this.$refs.form.validate()不执行的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-09-09

最新评论