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)问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05antfu大佬的v-lazy-show教我学会了怎么编译模板指令
这篇文章主要介绍了antfu大佬的v-lazy-show,我学会了怎么编译模板指令示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-04-04vue3 setup中父组件通过Ref调用子组件的方法(实例代码)
这篇文章主要介绍了vue3 setup中父组件通过Ref调用子组件的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08如何解决this.$refs.form.validate()不执行的问题
这篇文章主要介绍了如何解决this.$refs.form.validate()不执行的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
最新评论